用p：graphicImage彈出圖像

Question

我有一個使用p:graphicImage的簡單jsf primefaces代碼

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

我正在嘗試添加“點擊圖像彈出”功能。 我看到了使用jquery彈出的圖像列表

我決定使用fancyBox，但我不知道如何將其與primefaces graphicImage一起使用。 有人可以幫忙嗎？

它不必是fancyBox或任何其他jquery插件。 我只需要一個簡單的“點擊圖像彈出”功能。

更新

嘗試使用Lightbox但不起作用

<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>

這些圖像給了我一個斷開的鏈接。

注意：沒有lightbox ，一切正常。

Answer 1

PrimeFaces為此提供了一些幫助。 它叫做LightBox。

有關示例，請參見此處的展示 。