How do i get the URL of an <ice:graphicImage> element?

Question

Hello, I'm trying to do a thumbnail gallery on my web page so that when one is clicked the full size image is shown. The images are stored in a backing bean and are shown with an tag.

<li>
       <a href="????">
           <ice:graphicImage value="#{screenshot.image}" styleClass="thumb"/>
       </a>
</li>

When on the page, I see the images have addresses like /block/resource/MjY0OTc3Mzc1/ since they are served by the Icefaces blocking servlet.

What i need to know is how to get the link to the image so i can put it in the element.

Thanks for any help !

Answer 1

In this particular situation, your best bet is likely JavaScript. When the page is finished loading, grab all <img> elements with classname thumb, extract the src attribute, locate the parent <a> and update its href attribute accordingly.

But I wouldn't do that. One, it's bad for user experience. Two, it won't work on JS disabled clients. Three, storing raw images in a bean is memory hogging. Rather store the images on local disk file system and link to them directly or, when outside the public webcontent or in a database, using a servlet. Then in your managed bean just have a collection of URL's to the images (or the servlet) and let the servlet stream them sequentially accordingly. You can find here a basic example of such a servlet and here a more advanced one supporting caching and resume.

Answer 2

Here's what I did to solve the problem. I had this unordered list for my gallery:

<ui:repeat value="#{solutionBean.solution.screenshots}" var="screenshot">
                    <li>
                        <a href="gal" rel="prettyPhoto[gallery]" title="#{screenshot.description}">
                        <ice:graphicImage value="#{screenshot.image}" alt="#{screenshot.alternative}"
                                              height="135" width="130"/>
                        </a>
                    </li></ui:repeat>

And I added this script to replace the href elemnt in the hyperlink with the src element from the image:

 jQuery(document).ready(function() {
            jQuery("a[href^='gal']").each(function() {
                this.href = jQuery('img', this).attr("src");
            });
        });