LightBox

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


<div class="card">
    <h5 style="margin-top: 0">Images</h5>
    <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" styleClass="p-shadow-4"
                            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" styleClass="p-shadow-4"
                            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" styleClass="p-shadow-4"
                            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" styleClass="p-shadow-4"
                            style="height: 77px; width: 100px"/>
        </h:outputLink>
    </p:lightBox>
</div>

<div class="card">
    <h5>Inline</h5>
    <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>
</div>

<div class="card">
    <h5>IFrame</h5>
    <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>
</div>