p:graphicImage and Fancybox Integration - jsf

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&v=5.3&pfdrid=GgwXKejrBbRvnC%2Fxp98FzlaymhDf7Gb%2BEVoD%2BlqKVRmYUBBZeMmjKw%3D%3D&pfdrt=sc&imageId=23&myTimeStamp=Sun+May+15+19%3A19%3A08+CEST+2016&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'
}); }