p: graphicImage und Fancybox Integration

Question

Ich verwende JSF 2.2 mit PrimeFaces 5.3 unter dem Glassfish 4.1

Innerhalb der Anwendung ich den Ansatz verwenden, um die Bilder aus der Datenbank zu zeigen. Also das heißt ich habe keine URL. Es gibt Tonnen von Beispiel aus dieser Sicht, aber ich werde hier einfügen, um nützlicher zu sein.

Hier wird die facelets

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

Und hier das Backing 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())); 
     } 
    } 

Hier ein Beispiel eines der erzeugte HTML-Code

<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"> 

von Entwurf, um das zu verwenden, Galerie, die von fancybox kommt, benötigen wir einen Code ähnlich dem folgenden

Aber ich benutze graphicImages mit Streams, ich habe nicht die Verbindung im Href-Wert benötigt. Gibt es eine Möglichkeit, die generierte Bild-URL abzurufen? Grundsätzlich muss ich die generierte Zeichenfolge abrufen, die zum Füllen des src-Attributs des img-Tags verwendet wird.

Ist es möglich, das Problem zu lösen? Vielen Dank!

Answer 1

Die Lösung besteht darin, jedes p: graphicImage und sein h: outputLink mit einer benutzerdefinierten ID zu markieren.

<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> 

und dann in der Front-End-Seite, wenn die Seite ist bereit

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

und in einem externen Js folgende Funktionen Datei.

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' 
    }); }