p:graphicimage not working

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?

Solution

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