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

Basic

Content

Watch Video

Import


import {LightboxModule} from 'primeng/lightbox';

Getting Started

Lightbox has two modes; image and custom content defined using type property. In image mode a collection of images are required to display where an image object in the collection defines the source of the original image, thumbnail image and the title.


<p-lightbox [images]="images"></p-lightbox>


export class LightboxDemo {

    images: any[];

    constructor() {
        this.images = [];
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos1.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos1_small.jpg', title:'Sopranos 1'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos2.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos2_small.jpg', title:'Sopranos 2'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos3.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos3_small.jpg', title:'Sopranos 3'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos4.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos4_small.jpg', title:'Sopranos 4'});
    }
}

Content mode is enabled by setting type property to "content", providing an anchor to open the lightbox and content to display inside lightbox.


<p-lightbox type="content">
    <a class="group" href="#">
        Watch Video
    </a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</p-lightbox>

Effects

The easing function to use between image transitions is "ease-out" by default and this can be customized using easing property. See here for possible alternative values. Duration of the effect can be changed using effectDuration option.


<p-lightbox [images]="images" easing="ease-in" effectDuration="1500ms"></p-lightbox>

Properties

Name Type Default Description
images array null An array of images to display.
type string image Type of the lightbox, valid values are "image" and "content".
style string null Inline style of the component.
styleClass string null Style class of the component.
easing string ease-out Easing to use for transition between images.
effectDuration string 500ms Duration of the transition between the images.
baseZIndex number 0 Base zIndex value to use in layering.
autoZIndex boolean true Whether to automatically manage layering.

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

None.

View on GitHub

<h3 class="first">Basic</h3>
<p-lightbox [images]="images"></p-lightbox>

<h3>Content</h3>
<p-lightbox type="content">
    <a class="group" href="#">
        Watch Video
    </a>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
</p-lightbox>


export class LightboxDemo {

    images: any[];

    constructor() {
        this.images = [];
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos1.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos1_small.jpg', title:'Sopranos 1'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos2.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos2_small.jpg', title:'Sopranos 2'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos3.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos3_small.jpg', title:'Sopranos 3'});
        this.images.push({source:'assets/showcase/images/demo/sopranos/sopranos4.jpg', thumbnail: 'assets/showcase/images/demo/sopranos/sopranos4_small.jpg', title:'Sopranos 4'});
    }
}