Primefaces

Question

我在 primefaces 中遇到灯箱问题。我在数据网格中有一些职位。对于每个我显示缩略图。我希望缩略图可以点击。单击后我想显示更大版本的图片。一切都可以作为 JSF 资源使用。在我使用分页器和 return 更改页面之前，它工作正常。然后我的灯箱包含两张照片。当我重复这个过程时，我又得到了三张图片等等......看起来每次我将页面切换到包含给定图片的页面时都会呈现灯箱内容。

这是我的代码：

<h:form id="productsList">

<p:dataGrid
    var="product" value="#{productsList.products}" columns="2" layout="grid"
    rows="6" paginator="true" id="products" 
    first="#{productsList.firstOnPage}"         
    currentPageReportTemplate="{startRecord} - {endRecord} of {totalRecords}"
    paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
    >
    <p:ajax event="page" listener="#{productsList.onPageChange}"/>

    <div class="product-panel">

        <p:lightBox>
          <h:outputLink>
            <p:graphicImage 
              value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
              styleClass="thumbnail">
              <f:param name="id" value="#{product.thumbnail.id}" />
            </p:graphicImage>
          </h:outputLink>
          <f:facet name="inline">
            <p:graphicImage 
              value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
              style="max-width: 900px; max-height: 80vh">
              <f:param name="id" value="#{product.mediumImage.id}" />
            </p:graphicImage>
          </f:facet>
        </p:lightBox>

        <div class="product-panel-description">
            <!-- some html here -->
        </div>

    </div>

</p:dataGrid>
</h:form>

ImagesBean.java:

@ApplicationScoped @ManagedBean
public class ImagesBean {

    @EJB
    private FileResourceDao fileResourceDao;

    public StreamedContent getImage() throws IOException {

        FacesContext context = FacesContext.getCurrentInstance();

        if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) {
            // So, we're rendering the view. Return a stub StreamedContent so that it will generate right URL.
            return new DefaultStreamedContent();
        }
        else {
            // So, browser is requesting the image. Return a real StreamedContent with the image bytes.
            String id = context.getExternalContext().getRequestParameterMap().get("id");
            if (id == null || id.isEmpty()) return null;
            FileResource fileResource = fileResourceDao.read(Long.valueOf(id));

            ByteArrayInputStream sdf = new ByteArrayInputStream(fileResource.getContent());
            return new DefaultStreamedContent(sdf, "image/png");
        }
    }
}

这里可以实现我的目标吗？如果不行，有没有更好的办法？

Answer 1

好的。我用 <p:dialog> 做到了。像这样：

      <h:outputLink value="javascript:void(0)" onclick="PF('picDialog-#{product.id}').show();" >              
        <p:graphicImage 
          value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
          styleClass="thumbnail">
          <f:param name="id" value="#{product.thumbnail.id}" />
        </p:graphicImage>
      </h:outputLink>
      <p:dialog id="picDialog-#{product.id}" widgetVar="picDialog-#{product.id}">
        <p:graphicImage 
          value="#{imagesBean.image}" rendered="#{product.thumbnail != null}" 
          style="max-width: 900px; max-height: 80vh">
          <f:param name="id" value="#{product.mediumImage.id}" />
        </p:graphicImage>
      </p:dialog>

Primefaces - 灯箱和数据表 - 灯箱渲染两次

Primefaces - lightbox and datatable - lightbox rendered twice

jsf

lightbox