Question

我在primefaces中遇到灯箱问题。我在datagrid中有一些职位。对于每个我显示缩略图。我希望缩略图可以点击。点击后我想显示更大版本的图片。一切都可以作为JSF资源使用。它工作正常，直到我用paginator更改页面并返回。然后我的灯箱包含两张照片。再次，当我重复这个过程时，我有三张图片等等......每当我将页面转换为包含给定图片的图片时，看起来就会呈现灯箱内容。

这是我的代码：

<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 - 灯箱和数据表 - 灯箱呈现两次

1 个答案: