Displaying a collection of images with imageSwitch

The imageSwitch component can be used to display a collection of images with transition effects.

How to do it…

A basic definition for the imageSwitch for viewing a static list of car images would be as follows:

<p:imageSwitch id="simple">
  <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:imageSwitch>

The snippet will be visualized as follows:

The preceding image is seen as a static image; by default, imageSwitch will do a slideshow on page load between the images defined. Setting the slideshowAuto attribute to false can disable this behavior. The speed of the transition can be defined by the slideshowSpeed attribute. Its default value is 3000 milliseconds.

The imageSwitch...