p:graphicimage not working

Question

I have been looking for a solution to my JSF problem a couple of days now and tried out all possible solutions. Nothing worked.

I would like to implement a jsf galleria, like this one. The code did not work, nothing was displayed in the page.

Here's my bean:

import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ApplicationScoped;
import javax.faces.bean.ManagedBean;

@ManagedBean(name="myGallery")
@ApplicationScoped
public class GalleriaBean {

private List<String> images;

private String effect = "fade";

@PostConstruct
public void init() {
    images = new ArrayList<String>();

    for(int i=1;i<=4;i++) {
        images.add("gallery" + i + ".jpg");
    }
}

public List<String> getImages() {
    return images;
}

public String getEffect() {
    return effect;
}

public void setEffect(String effect) {
    this.effect = effect;
}
}

And the following code would be my xhtml content:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:p="http://primefaces.org/ui"> 

<h:head></h:head> 
<h:body>
    <h:panelGroup>
    <p:galleria effect="#{myGallery.effect}" var="image" effectSpeed="1000" styleClass=".ui-galleria-image-thumb-nav-left">  
        <ui:repeat value="#{myGallery.images}" var="image">  
            <h:graphicImage value="resources/images/#{image}" title="#{image}"/>  
        </ui:repeat>  
    </p:galleria>
</h:panelGroup>
</h:body> 
</html>

As you might have noticed, I am using instead of . With this setting, all my images are thrown into the page, in a vertical list, with no fade transition or any other gallery type. If I replace with , my page is completely blank and the images are NOT displayed at all.

What could be the reason for that? What do I have to add, to make the gallery look like the one on the page above?

Check the URL. Did you try replacing the `value` attribute by `name` or `url`? Moreover, `` is completely unnecessary here. Get rid of it. The loop is handled by `` itself (there is a missing `value` attribute in ``. Make use of it properly removing `` in its entirely). — Tiny, Jun 05 '14 at 23:06
@Tiny looks like the problem is using the `` that redefines `image` variable. — Luiggi Mendoza, Jun 06 '14 at 01:38
Removing the and putting the value attribute (with the same parameter as illustrated above) did not help. Furthermore, changing "value" to "name" or to "url" didn't help either. — TheMo, Jun 06 '14 at 06:39
I'm using the primefaces 4.0 library. Could that be the issue? I'll try including the latest version 5.0.1 and get back to you guys... — TheMo, Jun 07 '14 at 16:42
Nope, I replaced primefaces 4.0 with primefaces 5.0 - same behavior :( — TheMo, Jun 07 '14 at 16:47

score 1 · Answer 1 · answered Jun 08 '14 at 16:44

1

Okay, the problem seemed to be the fact that I did not put the PrimeFaces library (jar) in the lib folder in WEB-INF. Furthermore, I made sure I have setters and getters for all properties in the GalleriaBean. Hope this helps anyone.

answered Jun 08 '14 at 16:44

TheMo

11
1
4

score -2 · Accepted Answer · answered Jun 06 '14 at 10:32

-2

hy,

with this code is run :)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:p="http://primefaces.org/ui"> 

    <h:head></h:head> 
    <h:body>
        <h:panelGroup>
        <p:galleria effect="#{myGallery.effect}" value="#{myGallery.images}" var="image" effectSpeed="1000" styleClass=".ui-galleria-image-thumb-nav-left">  

                <p:graphicImage name="pathDirectory/#{image}" title="#{image}"/>  

        </p:galleria>
    </h:panelGroup>
    </h:body> 
    </html>

you can the example in site PrimeFaces

answered Jun 06 '14 at 10:32

sghaier ali

433
2
15

It doesn't, I still see a blank page :( Is it possible that my issue is somewhere else? Some libraries missing? Version problems? – TheMo Jun 06 '14 at 14:10
blank page because in index.jsf on your page you have include Jquery. you dont must include it because is included in primefaces. if dont work again put all you page html code – sghaier ali Jun 06 '14 at 14:50
I'm not sure I understand, I did not include JQuery and I do not use any .jsf file. Can you please be more precise? Thanks! – TheMo Jun 06 '14 at 20:11
just you did not include Jquery in your page because Jquery is already included in primefaces. when you include primefaces Jquery is included automatically. (remember do vote my responce if is resolve your problem) – sghaier ali Jun 07 '14 at 11:39
I'm not sure I can follow. As of my understanding, I do not have to include JQuery. Your above code is not displaying anything for me - did it work for you? If yes, the problem might be somewhere else... Any other ideas? Thanks! – TheMo Jun 07 '14 at 13:01

p:graphicimage not working

2 Answers2