import {Lightbox} from 'primeng/primeng';
Lightbox has two modes; image and custom content. In image mode, anchor elements with images are used as the children where clicking on them, opens up the lightbox to display the images collection.
<p-lightbox>
<a *ngFor="let image of images" href="showcase/resources/demo/images/sopranos/{{image}}.jpg">
<img src="showcase/resources/demo/images/sopranos/{{image}}_small.jpg" alt="{{image}}"/>
</a>
</p-lightbox>
In content mode, the custom content is defined as a hidden sibling of the anchor element.
<p-lightbox>
<a class="group" href="#">
View Content
</a>
<div class="ui-helper-hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</div>
</p-lightbox>
Following is the list of structural style classes, for theming classes visit theming page.
Name | Element |
---|---|
ui-lightbox | Container element |
ui-lightbox-content | Content element. |
ui-lightbox-nav-right | Element to navigate to next image. |
ui-lightbox-nav-left | Element to navigate to previous image. |
ui-lightbox-caption | Caption element. |
ui-lightbox-caption-text | Text of caption. |
ui-lightbox-close | Close icon. |
PrimeUI Lightbox.
<h3 class="first">Basic</h3>
<p-lightbox>
<a *ngFor="let image of images" href="showcase/resources/demo/images/sopranos/{{image}}.jpg">
<img src="showcase/resources/demo/images/sopranos/{{image}}_small.jpg" alt="{{image}}"/>
</a>
</p-lightbox>
<h3>Content</h3>
<p-lightbox>
<a class="group" href="#">
View Content
</a>
<div class="ui-helper-hidden">
<iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</div>
</p-lightbox>