Ajax Core

Input

Button

Button CommandButton CommandLink SplitButton

Data

Panel

Overlay

Menu

Charts

Message

Growl Messages

Multimedia

File

DragDrop

Draggable DataGrid DataTable
Football Native

Dialog Framework

Basic Data

Misc

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>