<style type="text/css">
    .imagebox a{
        margin-left:10px;
    }
</style>


<h3 style="margin-top: 0">Images</h3>
<p:lightBox styleClass="imagebox" id="lighbox1">  
    <h:outputLink value="../../resources/demo/images/nature/nature1.jpg" title="Nature 1">  
        <h:graphicImage name="/demo/images/nature/nature1.jpg" id="nature1" style="height: 77px; width: 100px" />  
    </h:outputLink>
    
    <h:outputLink value="../../resources/demo/images/nature/nature2.jpg" title="Nature 2">  
        <h:graphicImage name="/demo/images/nature/nature2.jpg" id="nature2" style="height: 77px; width: 100px" />  
    </h:outputLink>
    
    <h:outputLink value="../../resources/demo/images/nature/nature3.jpg" title="Nature 3">  
        <h:graphicImage name="/demo/images/nature/nature3.jpg" id="nature3" style="height: 77px; width: 100px" />  
    </h:outputLink>
    
    <h:outputLink value="../../resources/demo/images/nature/nature4.jpg" title="Nature 4">  
        <h:graphicImage name="/demo/images/nature/nature4.jpg" id="nature4" style="height: 77px; width: 100px" />  
    </h:outputLink>
</p:lightBox>

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

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

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