Need help adding replay button to JQuery SlideShow Animation

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|

Need help adding replay button to JQuery SlideShow Animation

jerrell
index.html

Hello,

I would like to include a replay button that fades in after the slideshow has completed. How can I achieve this task?

Thank You.


<script type="text/javascript"> var mycounter; $(function(){ slideShow(); }); function slideShow() { mycounter = 0; $('#replay').hide(); // make sure button is hidden /** * Array of images */ var arr = [ "hills.jpg", "lilies.jpg", "sunset.jpg", "winter.jpg", "slideshow.jpg" ]; /** * Foreach loop */ $.each(arr, function(i, val) { /** * Changing div opacity to 0. 1000 is the time in ms. */ $("#sImage").animate({opacity: 0.0}, 1000); /** * Queue function will place the event in queue * Changing image src after the above animate function is completed */ $("#sImage").queue(function(){ $("#sImage").attr("src", val); $("#sImage").dequeue(); }); /** * Changing div opacity to 1. 1000 is the time in ms. */ $("#sImage").attr("src", val).animate({opacity: 1.0}, 1000); /** * Queue function will place the event in queue * Here, queue function is used to hold the changing image for 1 second display */ $("#sImage").queue(function(){ setTimeout(function(){ $("#sImage").dequeue(); mycounter=1+mycounter; }, 1000); }); }); // after $.each start a loop that checks for mycounter=arr.length regularly setTimeout(checkCounter, 500); } function checkCounter() { if(mycounter<arr.length) { setTimeout(checkCounter, 500); } else { // mycounter has reached arr.length ... show the button $('#replay').show(); } } </script>