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

Images

Inline

IFrame

PrimeFaces Home
$('#images').puilightbox();
                                
<div id="images">
    <a href="/resources/demo/images/sopranos/sopranos1.jpg">
        <img src="resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos2.jpg">
        <img src="resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos3.jpg">
        <img src="resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos4.jpg">
        <img src="resources/demo/images/sopranos/sopranos4_small.jpg" alt="Sopranos 4"/>
    </a>
</div>
                                
Name Type Default Description
iframe boolean false Enables iframe mode to open target of link in an iframe.
iframeWidth integer 640 Width of the iframe.
iframeHeight integer 480 Height of the iframe.
Name Parameters Description
show event: puilightboxshow event Fired when lightbox is displayed.
hide event: puilightboxhide event Fired when lightbox is hidden.

Example

$('#images').puilightbox({
    hide: function(event) {
        //...
    }
});
                                
Name Parameters Description
show - Shows lightbox.
hide - Hides lightbox.
center - Centers lightbox in viewport.
showURL cfg.src: Source url to show.
cfg.width: Width of the iframe.
cfg.height: Height of the iframe
Shows a url in an iframe.
option name: Name of the option Returns the value of the option.
option name: Name of the option, value: Value of the option Set the value of the option.

Example

$('#images').puilightbox('show);
                                
$(function() {
    $('#images').puilightbox();

    $('#inline').puilightbox();

    $('#external').puilightbox({
        iframe: true
    });
});
                                
<div id="images">
    <a href="resources/demo/images/sopranos/sopranos1.jpg">
        <img src="resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos2.jpg">
        <img src="resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos3.jpg">
        <img src="resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="resources/demo/images/sopranos/sopranos4.jpg">
        <img src="resources/demo/images/sopranos/sopranos4_small.jpg" alt="Sopranos 4"/>
    </a>
</div>

<div id="inline">
    <a class="group" href="#">
        View Content
    </a>

    <div class="ui-helper-hidden">
        <h1 style="margin-top:0">PrimeUI</h1>
        <img src="resources/images/logo.svg" /> 
    </div>
</div>

<a id="external" href="http://www.primefaces.org">
    PrimeFaces Home
</a>