Overlay - Lightbox - 《PrimeNG Document》

Documentation
Source

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

Documentation

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.

Source

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'});
    }
}