P：graphicImageはとFancybox統合

Question

私は、データベースからの画像を表示するためのアプローチを使用してアプリケーション内のGlassFish 4.1

下

私はPrimeFaces 5.3とJSF 2.2を使用しています。 これは私にURLがないことを意味します。 この点ではたくさんの例がありますが、私はもっと便利になるようにここに貼り付けていきます。ここで

使用するために、ここでのFacelets

<p:graphicImage value="#{applicationScopedBean.imagesFromDb}" class="img"> 
    <f:param name="imageId" value="#{actualAd.favouriteImageId}" /> 
    <f:param name="cvlTimeStamp" value="#{now}" /> 
</p:graphicImage> 

そして、ここでバッキングBean

public StreamedContent getImagesFromDb() { 
     FacesContext context = FacesContext.getCurrentInstance(); 

     if (context.getCurrentPhaseId() == PhaseId.RENDER_RESPONSE) { 
      // So, we're rendering the HTML. 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 imageId = context.getExternalContext().getRequestParameterMap().get("imageId"); 
      return new DefaultStreamedContent(new ByteArrayInputStream(imageManager.getById(Long.valueOf(imageId)).getContent())); 
     } 
    } 

生成されたHTMLコード設計によって

<img src="/myWebApp/faces/javax.faces.resource/dynamiccontent.properties?ln=primefaces&amp;v=5.3&amp;pfdrid=GgwXKejrBbRvnC%2Fxp98FzlaymhDf7Gb%2BEVoD%2BlqKVRmYUBBZeMmjKw%3D%3D&amp;pfdrt=sc&amp;imageId=23&amp;myTimeStamp=Sun+May+15+19%3A19%3A08+CEST+2016&amp;pfdrid_c=true"> 

の例、 fancyboxから来るギャラリーには、次のようなコードが必要です

ただし、ストリームと一緒にgraphicsImagesを使用すると、href値に必要なリンクがありません。 生成された画像のURLを取得できますか？ 基本的には、imgタグのsrc属性を埋め込むために生成された文字列を取得する必要があります。

問題を解決することは可能ですか？ ありがとうございました！

Answer 1

解決策は、p：graphicImageとh：outputLinkをすべてカスタムIDでマークすることです。フロントエンド側で

<c:forEach items="#{myController.images}" var="img" begin="0" class="hidden-xs" varStatus="loop"> 
    <h:outputLink id="aInsideLightbox#{loop.index+1}" class="fancybox imgCVLGalleryDetail hidden-xs" rel="group"> 
    <p:graphicImage id="imgInsideLightbox#{loop.index+1}" value="#{applicationScopedBean.imagesFromDb}" class="img"> 
     <f:param name="imageId" value="#{img.imageWrapper.id}" /> 
    </p:graphicImage> 
    </h:outputLink>            
</c:forEach> 

し、ページは

<h:outputScript library="js" name="external.js"/> 
<script> 
    $(document).ready(function() { 
    setUrlInTheFancyboxLinkAndImage(); 
    setTypeImageInFancybox(); 
    }); 
</script> 

と外部の.jsは、次のような機能がファイルの準備ができたとき。

function setUrlInTheFancyboxLinkAndImage() { 
    for (i = 0; i < 20; i++) { 
     $imgToImprove = document.getElementById("imgInsideLightbox" + i); 
     if ($imgToImprove !== null) { 
      $aToImprove = document.getElementById("aInsideLightbox" + i); 
      if ($aToImprove !== null) { 
       $aToImprove.setAttribute("href", $imgToImprove.getAttribute("src")); 
      } 
     } 
    } 
} 

function setTypeImageInFancybox() { 
    $(".fancybox").fancybox({ 
     type: 'image', 
     openEffect: 'none', 
     closeEffect: 'none' 
    }); }