Image Switcher button controls

[monimo]

Hi everyone!

I am very new to primefaces and am currently working with a few components and am having some trouble with imageSwitcher.
I am trying to display a series of images in a slideshow. I want to have the slideshow begin on load and give the users the option to pause the slideshow or go directly to an image by clicking on a numbered button control. I also would like to have a pause button.

I am having difficulty figuring out how to get the numbered buttons to display their image.

Any help with this would be greatly appreciated.


Thank You!!

Code: Select all

		<p:commandButton type="button" onclick="images.previous();"  
                value="Previous"/>  
		<p:commandButton type="button" onclick="images.next();"  
                value="Next"/> 
		<p:commandButton type="button" onclick="images.pauseSlideshow();"  
                value="Pause"/> 
       	        <p:commandButton type="button" onclick="test1.show();"  
                value="1"/> 
             	 <p:commandButton type="button" onclick="test2.show();"  
                value="2"/>  
              	 <p:commandButton type="button" onclick="test3.show();"  
                value="3"/>  
                 <p:commandButton type="button" onclick="test4.show();"  
                value="4"/>  
                 <p:commandButton type="button" onclick="test5.show();"  
                value="5"/>  

       
		
		<p:panel id="gallery" >
			<p:imageSwitch  effect="fade" speed="4000" slideshowAuto="true"  widgetVar="images">
				<p:graphicImage id="test1" value="/resources/images/image1.jpg"/> 
				<p:graphicImage id="test2" value="/resources/images/image2.jpg"/>
				<p:graphicImage id="test3" value="/resources/images/image3.jpg"/>
				<p:graphicImage id="test4" value="/resources/images/images4.jpg"/>
				<p:graphicImage id="test5" value="/resources/images/image5.jpg"/>
			</p:imageSwitch>
		</p:panel>