LightBox

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

Images

Inline

IFrame

Source

<h3>Images</h3>
<p:lightBox styleClass="imagebox">
    <h:outputLink value="../images/sopranos/sopranos1.jpg" title="Sopranos 1">
        <h:graphicImage value="/images/sopranos/sopranos1_small.jpg"/>
    </h:outputLink>

    <h:outputLink value="../images/sopranos/sopranos2.jpg" title="Sopranos 2">
        <h:graphicImage value="/images/sopranos/sopranos2_small.jpg" />
    </h:outputLink>

    <h:outputLink value="../images/sopranos/sopranos3.jpg" title="Sopranos 3">
        <h:graphicImage value="/images/sopranos/sopranos3_small.jpg"/>
    </h:outputLink>

    <h:outputLink value="../images/sopranos/sopranos4.jpg" title="Sopranos 4">
        <h:graphicImage value="/images/sopranos/sopranos4_small.jpg"/>
    </h:outputLink>
</p:lightBox>

<h3>Inline</h3>
<p:lightBox>
    <h:outputLink value="#">
        <h:outputText value="Video Content"/>
    </h:outputLink>

    <f:facet name="inline">
        <p:media value="http://vimeo.com/moogaloop.swf?clip_id=18079550"  width="400" height="225" player="flash"/>
    </f:facet>
</p:lightBox>

<h3>IFrame</h3>
<p:lightBox iframe="true">
    <h:outputLink value="http://www.primefaces.org" title="PrimeFaces HomePage">
        <h:outputText value="PrimeFaces HomePage"/>
    </h:outputLink>
</p:lightBox>