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="#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="#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>