我在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");
}
}
}
有可能在这里实现我的目标吗?如果没有,有更好的方法吗?
答案 0 :(得分: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>