Question

当我在灯箱中设置特殊高度（例如100px或100％）时，叠加图像不会展开。使用CSS也无法做到这一点。使用javascript，构建变通方法（仍在进行中）并不容易。有人能够在灯箱组件中以任何方式设置高度吗？我在许多非jsf页面上使用灯箱，它工作得很完美。

<p:lightBox styleClass="eintragFullscreen" height="100px" rendered="#{eintragPublic.hasImage}">
    <h:outputLink value="#{request.contextPath}/images/image?id=#{eintragPublic.eintrag.id}">
        <h:graphicImage
            value="/images/image?id=#{eintragPublic.eintrag.id}"
            styleClass="img_eintrag" />
    </h:outputLink>
</p:lightBox>

Answer 1

您可以像这样指定缩略图高度和叠加高度。

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

<h:head>
<h:outputStylesheet>
    .thumb {
        height: 100px;
    }
    .view {
        height: 500px;
    }
</h:outputStylesheet>
</h:head>

<h:body>
    <p:lightBox styleClass="view">
        <h:outputLink value="#{request.contextPath}/resources/img.png">
            <h:graphicImage styleClass="thumb" value="/resources/img.png" />
        </h:outputLink>
    </p:lightBox>
</h:body>
</html>

由于某种原因，缩略图高度会影响叠加高度，因此必须明确指定两个高度。

height的{{1}}仅在帧内模式下指定叠加高度，请参阅PrimeFaces User Guide。

Primefaces：灯箱改变图像高度

1 个答案: