image popup with p:graphicImage

Question

I have a simple jsf primefaces code using a p:graphicImage

<p:graphicImage value="#{imageStreamer.image}" >
    <f:param name="id" value="#{item}" />
</p:graphicImage>

I am trying to add an "on click image pop up" function. I saw a list of image pop-up using jquery

I have decided to use fancyBox, but I have no idea how to use it with primefaces graphicImage. Anyone can help?

it does not have to be fancyBox or any other jquery plugins. I just need a simple "on click image pop up" function.

UPDATE

tried using Lightbox but it does not work

<p:galleria id="photo-galleria" value="#{testController.ImageIdsView(list[1])}" var="item" autoPlay="false" frameWidth="200" frameHeight="188" panelWidth="625">  
    <p:lightBox styleClass="imagebox">  
        <h:outputLink value="#{imageStreamer.image}">  
            <p:graphicImage value="#{imageStreamer.image}" >
                <f:param name="id" value="#{item}" />
            </p:graphicImage>
        </h:outputLink>
    </p:lightBox>
</p:galleria>

the images gives me a broken link.

Note: without the lightbox, everything works fine.

Answer 1

PrimeFaces has something for that. It's called LightBox.

See the Showcase here for an example.