PrimeUI

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

<div id="images">
    <a href="showcase/resources/demo/images/sopranos/sopranos1.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos2.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos3.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos4.jpg">
        <img src="showcase/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="showcase/resources/demo/images/sopranos/sopranos1.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos2.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos3.jpg">
        <img src="showcase/resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos4.jpg">
        <img src="showcase/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="showcase/resources/images/logo.svg" /> 
    </div>
</div>

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

<h3>Prime Element</h3>
<p-lightbox>
    <a href="showcase/resources/demo/images/sopranos/sopranos1.jpg" title="Sopranos 1">
        <img src="showcase/resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos2.jpg" title="Sopranos 2">
        <img src="showcase/resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos3.jpg" title="Sopranos 3">
        <img src="showcase/resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos4.jpg" title="Sopranos 4">
        <img src="showcase/resources/demo/images/sopranos/sopranos4_small.jpg" alt="Sopranos 4"/>
    </a>
</p-lightbox>
                                

Usage

Lightbox is used as a container for anchor elements.

<p-lightbox>
    <a href="showcase/resources/demo/images/sopranos/sopranos1.jpg" title="Sopranos 1">
        <img src="resources/demo/images/sopranos/sopranos1_small.jpg" alt="Sopranos 1"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos2.jpg" title="Sopranos 2">
        <img src="resources/demo/images/sopranos/sopranos2_small.jpg" alt="Sopranos 2"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos3.jpg" title="Sopranos 3">
        <img src="resources/demo/images/sopranos/sopranos3_small.jpg" alt="Sopranos 3"/>
    </a>
    <a href="showcase/resources/demo/images/sopranos/sopranos4.jpg" title="Sopranos 4">
        <img src="showcase/resources/demo/images/sopranos/sopranos4_small.jpg" alt="Sopranos 4"/>
    </a>
</p-lightbox>
                                

Attributes

Name	Type	Default	Description
id	string	null	Identifier of the element.
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.

Methods

Name	Parameters	Description
show()	-	Displays the lightbox.
hide()	-	Hides the lightbox.
showURL(cfg)	cfg.src: Source url to show. cfg.width: Width of the iframe. cfg.height: Height of the iframe	Shows a url in iframe.