Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help adding replay button to JQuery SlideShow Animation

    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.

    Jquery code:
    Code:
    <script src="jquery-1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    
    $(document).ready(function(){	
    
    	
    	$(function(){		
    		/**
    		 * 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();
    					}, 1000); 
    									
    				}); 
    				
    								
    			}); 	
    		});
    		
    		
    	}); // end
    HTML code:
    Code:
    <body>
    <div align="center">
    	<button id="play"> Play </button>
    	<div class="slideshow">
    		<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />		
    	</div>
    </div>
    </body>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    First of all, you don't need to have $(document).ready(function) and $(function) in the same code, because they are semantically identical.

    All you have to do now is
    1. move the code into a function which will be called on document ready AND on button click
    2. add the button to the code but hide it
    3. show the button once the $.each() has finished

    Code:
    $(function(){
    	slideShow();
    });
    
    function slideShow() {
    
    	$('#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();
    			}, 1000); 
    							
    		}); 
    		
    						
    	}); 	
    
    	$('#replay').show();  // make sure button is visible
    }
    Code:
    <body>
    <div align="center">
    	<button id="play"> Play </button>
    	<div class="slideshow">
    		<img id="sImage" src="slideshow.jpg" alt="slideshow" rel="slideshow" />		
    	</div>
            <button id="replay" onclick="slideShow();" style="display: none;"> Replay </button>
    </div>
    </body>

  • #3
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello devnull69

    Thank you for your response and help.

    I have made the changes you suggested however the replay button is not hiding . I believe there is a conflict between $("#replay").hide() and $("#replay").show() because when i comment out $("#replay").show() the replay button hides.

    I have placed $("#replay").show() directly after the code an the replay button does hide temporarily but after the first image is displayed the replay button is shown.

    Do you have any suggestions on how I can fix this issue?


    Code:
    <script type="text/javascript">
    
    $(function(){
    	slideShow();
    });
    
    function slideShow() {
    
    	$("#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();
    			}, 1000); 
    			
    			$("#replay").show();  // make sure button is visible
    							
    		}); 
    		
    		
    						
    	}); 	
    
    	
    }
    
    </script>

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    Ah yes ... the usual animation problem. Wait, you are using queue() already, so let's take advantage of that
    Code:
    $(function(){
    	slideShow();
    });
    
    function slideShow() {
    
    	$('#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();
    				$('#replay').show();  // make sure button is visible
    			}, 1000); 
    							
    		}); 
    		
    						
    	}); 	
    
    }

  • #5
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I have tried placing $("#replay").show(); following dequeue(); as you suggested however that does not seem to work.

    I have also tried moving $("#replay").hide() outside function slideShow() but that is not working either.

    Do you think an if else statement will do the trick?

    Code:
    
    $(function(){
    	slideShow();
    	$("#replay").hide(); //make sure button is hidden
    });
    
    
    function slideShow() {
    	
    
    	/**
    	 * 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(); 
    				$("#replay").show(); //make sure button is visible
    			}, 1000); 
    			
    							
    		}); 
    		
    					
    	}); 
    	
    }

  • #6
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    hm ok now I see the problem. The .show() has to be after the $.each() ... so all animations of all the images have to be finished. But generally the animations are asynchronous so even after the end of $.each the animations might and will still be running.

    Let me think about it...

  • #7
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Okay Thanks again. I will continue working on it. When/If I find a solution I will post.

  • #8
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    How about that?
    Code:
    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++;
    			}, 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();
    	}
    }

  • #9
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Devnull69,

    sorry for the late reply. The replay button is still not appearing at completion of the slideshow but I believe your code is correct, its just that i don't think checkCounter function is seeing mycounter therefore it is bypassing the if else statement. I am reluctant to make mycounter a global variable... I attempted to pass in mycounter to the checkCounter function like this
    Code:
    function checkCounter(mycounter) {
    but that did not work.

    I was given the suggestion on creating a "big function" which would allow all the variables to be visible everywhere however I am somewhat of a newbie to developing JQuery script (as you can probably tell) and not too sure how to go about doing this...

    here is the suggestion i was given:

    function big() { // start of big
    var a,f,g,q; //Note all of these variables are visible everywhere inside of big including all functions inside of big
    //some big statements .
    function x() { var x1; //statements here will see vars a,f,g,q.. note x1 is only seen inside function x } // end x
    function y() { //statements here cannot see var x1, but will see a,f,g,q } // end y
    function z() { } // end z
    } // end of big




    Code:
    $(function(){
    slideShow();
    });
    	function slideShow() {
    	var mycounter;
    	$("#replay").hide();
    
    	/**
    	 * 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 = 0;
    				mycounter = 1 + mycounter;//increment mycounter
    			}, 1000); 
    
    							
    		}); 
    		
    						
    	}); 	
    		// after $.each start a loop that checks for mycounter=arr.length regularly
            setTimeout(checkCounter, 500);
    }
    
    
    function checkCounter(mycounter) {
    
    	if(mycounter<arr.length) {
    		$("#replay").hide();
    		setTimeout(checkCounter, 500);
    	} else {
    		// mycounter has reached arr.length ... show the button
             $("#replay").show();
           }
    }

  • #10
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,388
    Thanks
    11
    Thanked 565 Times in 558 Posts
    so you tried it with a global "mycounter" and it didn't work? Maybe someone else can take a look at this because I don't see a problem here.

    The way you proposed in your last post will not work because you do not transfer the value of "mycounter" to checkCounter() at all and you reset mycounter to 0 for each element. It has to increase with each element to be able to work at all.

  • #11
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I did try mycounter as a global variable but it did not work. You have put me on the right path, i will continue to try a few different things and add to the code. When i find a solution i will share.

    Thank you again for all your help.

  • #12
    New Coder
    Join Date
    Nov 2011
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hello devnull69 ,

    Your code did the trick! I simply had to add "mycounter" to setTimeout. Below is the working code for adding the replay button. Now I just have to get the replay button to replay the slideShow and I will be all set.

    Thank you for all you help!

    Code:
    <script type="text/javascript">
    
    $(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++;
    				setTimeout(checkCounter, 500, mycounter);
    			}, 1000); 
    							
    		}); 
    		
    						
    	}); 	
    
    	// after $.each start a loop that checks for mycounter=arr.length regularly
            
            
            function checkCounter() {
    	if(mycounter<arr.length) {
    		setTimeout(checkCounter, 500);
    	} else {
    		// mycounter has reached arr.length ... show the button
                    $('#replay').show();
    	}
    }
    
    }
    
    </script>


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •