The imageSwitch
component can be used to display a collection of images with transition effects.
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 attribute
uses effects for transition between images, and it supports over 25 different effects. The effect can be provided with the effect
attribute and its speed can be defined by the speed
attribute, which has 500 milliseconds as the default value. If no effect is specified, the built-in fade
effect is used for transition. The list of the supported effects are given as follows:
blindX
blindY
blindZ
cover
curtainX
curtainY
fade
fadeZoom
growX
growY
none
scrollUp
scrollDown
scrollLeft
scrollRight
scrollVert
shuffle
slideX
slideY
toss
turnUp
turnDown
turnLeft
turnRight
uncover
wipe
zoom
With the client side API provided, it's also possible to do manual transition between the images of the imageSwitch
. To trigger the slide change, two command buttons are defined, and the JavaScript defined with their onclick
attribute executes the navigation between the images. The previous()
and next()
methods are provided by the imageSwitch
component, which invokes the cycle
method of jQuery Cycle Plugin with the prev
and next
parameters respectively.
<p:commandButton type="button" onclick="PF('manualSwitch').previous();" icon="ui-icon-circle-triangle-w" id="prev" /> <p:commandButton type="button" onclick="PF('manualSwitch').next();" icon="ui-icon-circle-triangle-e" id="next" /> <p:imageSwitch id="manual" widgetVar="manualSwitch" slideshowAuto="false"> <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 visual of the component will be as follows:
In buttons, we are accessing the imageSwitch
component via JavaScript through the value of the widgetVar
attribute.
imageSwitch
supports the use of <ui:repeat>
in order to provide a collection of car images dynamically.
<p:imageSwitch id="withData"> <ui:repeat value="#{imageSwitchBean.cars}" var="car"> <p:graphicImage value="/resources/images/autocomplete/#{car.name}.png" /> </ui:repeat> </p:imageSwitch>
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/imageSwitch.jsf
.