I have implemented a simple galleria, which reads 4 images. It's working fine so far, the galleria is displayed, as well as the filmstrip below and the captions. The autoplay also works good.
The problem: the galleria reads all 4 images correctly (they are displayed as a filmstrip in the lower part), but sticks to the last image, even when automatically switching from one image to the next one (as part of the effect). So, the image is not changed, the last one is the only one displayed in full size. After the galleria has went through all images (so, after 3 transition effects), it goes back to the first image and then everything works fine, the images change as expected.
The obvious problem is, that galleria reads all images, but is unable to start with the first image. How can I set that? Is there any property to be considered?
Here's my code, maybe you see a mistake...
The GalleriaBean:
Code: Select all
import java.util.ArrayList;
import java.util.List;
import javax.annotation.PostConstruct;
import javax.faces.bean.ManagedBean;
import javax.faces.bean.SessionScoped;
@ManagedBean(name="galleriaBean")
@SessionScoped
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 void setImages(List<String> images) {
this.images = images;
}
public String getEffect() {
return effect;
}
public void setEffect(String effect) {
this.effect = effect;
}
}
Code: Select all
<!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:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">
<h:head>
<title>The PrimeFace Galleria example</title>
</h:head>
<h:body>
<p:galleria value="#{galleriaBean.images}" var="image" panelWidth="500" panelHeight="350" effectSpeed="1000" showCaption="true" autoPlay="false">
<p:graphicImage name="/images/#{image}" alt="Description for #{image}" title="#{image}" width="500" height="350"/>
</p:galleria>
</h:body>
</html>
I would highly appreciate any help. Thanks!
DM
