p:graphicImage and Fancybox Integration

Question

I'm using JSF 2.2 with PrimeFaces 5.3 under the GlassFish 4.1

Inside the application I use the approach to show the images from the database. So that means I don't have an URL. There're tons of example from this point of view, but I will paste here in order to be more useful.

Here the facelets

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

And here the 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()));
        }
    }

Here an example of a the generated 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">

By design, in order to use the gallery that comes from fancybox we need a code similar to the following

<a class="fancybox" rel="group" href="resources/bootstrap/css/images/single/1.jpg">
   <img id="img_01" alt="" class="raised" src="resources/bootstrap/css/images/single/1.jpg" style="width: 100%" />

But using graphicImages with streams, I don't have the link needed in the href value. There's a chance to retrieve the generated image url? Basically I need to retrieve the generated string used to fill the src attribute of the img tag.

Is it possible to solve the problem? Thank you!

Answer 1

The solution is to mark every p:graphicImage and his h:outputLink with a custom 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>

and then in the front-end side when the page is ready

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

and in an external .js file the following functions.

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