The galleria component can be used to display a collection of images with a transition effect.
A basic definition for the galleria component for viewing a static list of car images would be as follows:
<p:galleria>
<p:graphicImage value="/resources/images/autocomplete/CC.png" />
<p:graphicImage
value="/resources/images/autocomplete/Golf.png" />
<p:graphicImage
value="/resources/images/autocomplete/Polo.png" />
<p:graphicImage
value="/resources/images/autocomplete/Touareg.png" />
</p:galleria>The definition of the galleria component renders a car image in a panel and four other small images in a filmstrip right below it. This component also provides built-in iteration effects for the transition to occur between the images, which are provided by the autoPlay attribute, set as true by default. The transition happens within 4000 milliseconds and can be customized with the transitionInterval attribute.
The visibility of the filmstrip is enabled by default with the showFilmstrip attribute set as true. You can disable it by setting the attribute to false.
The width and height of the galleria canvas can be customized with panelWidth and panelHeight attributes. The width and height of the frames, visualized in the filmstrip, can be also be customized with the frameWidth and frameHeight attributes respectively. All values should be provided in pixels.
While iterating through the images, it is possible to apply transition effects. The effect attribute can have the values blind, bounce, clip, drop, explode, fade (the default), fold, highlight, puff, pulsate, scale, shake, size, slide, and transfer. The effectSpeed attribute can also be used to decide on the duration of the transition. Its default value is 500 milliseconds.
It is also possible to visualize a collection of car images that is bound through the value attribute of the galleria component as a collection. The galleria component offers data iteration on the collection with the var attribute.
<p:galleria id="withData" value="#{galleriaBean.cars}"
var="car" panelWidth="380" panelHeight="220">
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png" />
</p:galleria>The galleria attribute can also display detailed information about the image as an overlay that is placed at the bottom of the image. The title of this overlay can be retrieved from the image's title attribute and its description can be retrieved from the alt attribute.
<p:galleria id="withDataAndCaption" value="#{galleriaBean.cars}"
var="car" panelWidth="380" panelHeight="220"
showCaption="true">
<p:graphicImage
value="/resources/images/autocomplete/#{car.name}.png"
alt="Detail about #{car.name}" title="#{car.name}" />
</p:galleria>The visual of the component will be given as follows:
This recipe is available in the demo web application on GitHub (https://github.com/ova2/primefaces-cookbook/tree/second-edition). Clone the project if you have not done it yet, explore the project structure, and build and deploy the WAR file on every Servlet 3.x compatible application, server such as JBoss WildFly or Apache TomEE.
The showcase for the recipe is available under http://localhost:8080/pf-cookbook/views/chapter7/galleria.jsf.