PrimeFaces JSF lightBox显示网格和模态中的项目太小

问题描述

环境：

JBoss EAP：7.2.0
PrimeFaces版本：8.0
测试浏览器：Chrome 85.0和Edge 85.0

问题-lightBox网格中的项目：

我正在根据文档实施PrimeFaces lightBox，并在此处展示：https://www.primefaces.org/showcase/ui/overlay/lightBox.xhtml

我希望lightBox显示单个图像，并在单击时打开一个模型，该模型允许以更大的模式滚动其他图像。但是，我的lightBox在垂直网格中显示单个项目！查看屏幕截图：

这是我的p:lightBox代码：

.lightBox-link {
  width: 300px;
  height: 300px;
  background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/example-bg.png');
  background-position: 50% 50%;
  background-size: cover;
  background-repeat: no-repeat;
}

.w-inline-block {
  max-width: 100%;
  display: inline-block;
}

.rrsp-image-data-300px {
    width: 300px;
    height: 300px;
    border-radius: 100%;
    background-image: url('https://d3e54v103j8qbb.cloudfront.net/img/example-bg.png');
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    align-items: center;
}

<!-- [START]: Supply Image        -->
<div class="lightBox-link w-inline-block w-lightBox">

  <p:lightBox id="lbxSupplyDetailImage">

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

    <h:outputLink value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" title="#{controllerSupplies.clsSelectedSupply.sSupplyName}">
      <h:graphicImage value="#{controllerSupplies.clsSelectedSupply.lsSupplyImages.get(0).sSupplyImageFileURL}" styleClass="rrsp-image-data-300px" alt="#{controllerSupplies.clsSelectedSupply.sSupplyName}" />
    </h:outputLink>

  </p:lightBox>

</div>
<!-- [END]: Supply Image        -->

问题-lightBox模态太小：

此外，当我单击p:lightBox项目以打开完整图像时，它显示了非常小的模态，但图像为800x600px！ 这是屏幕截图：

为什么我要面对这两个问题？我可能会缺少什么？

注意：我正处于Java EE和JSF的初学者学习阶段。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）