Lightbox LightBox is a modal overlay component to display images, videos, inline html content and iframes.

Basic

{{image}}

Content

View Content

Import


import {Lightbox} from 'primeng/primeng';

Getting Started

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>

Styling

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.

Dependencies

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>