Web Analytics Made Easy -
StatCounter How to tell it to stop rotating images at the end? - CodingForum

Announcement

Collapse
No announcement yet.

How to tell it to stop rotating images at the end?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • How to tell it to stop rotating images at the end?

    Hi all! I'm using a little javascript script I came across for a simple slideshow and it works great. However I want it to stop rotating images when it comes to the end of the slideshow and just stay on the last image. Is there a simple way to edit this to tell it to do that?

    Code:
    var delay = 3000;
    var start_frame = 0;
    
    function init() {
    	var lis = $('slide-images').getElementsByTagName('li');
    	
    	for( i=0; i < lis.length; i++){
    		if(i!=0){
    			lis[i].style.display = 'none';
    		}
    	}
    	end_frame = lis.length -1;
    	
    	start_slideshow(start_frame, end_frame, delay, lis);
    	
    	
    }
    
    
    
    function start_slideshow(start_frame, end_frame, delay, lis) {
    	setTimeout(fadeInOut(start_frame,start_frame,end_frame, delay, lis), delay);
    }
    
    
    function fadeInOut(frame, start_frame, end_frame, delay, lis) {
    	return (function() {
    		lis = $('slide-images').getElementsByTagName('li');
    		Effect.Fade(lis[frame]);
    		if (frame == end_frame) { frame = start_frame; } else { frame++; }
    		lisAppear = lis[frame];
    		setTimeout("Effect.Appear(lisAppear);", 0);
    		setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
    	})
    	
    }
    
    
    Event.observe(window, 'load', init, false);
    Thanks for any help!

  • #2
    this might work

    if (frame == end_frame) { frame = end_frame; } else if (frame != end_frame){ frame++; }

    can you post the entire script?

    Comment


    • #3
      That is the entire script. It resides in a file called simple-slideshow.js. Then it acts on an unordered list in the html that looks like this:
      Code:
      <ul id="slide-images">
      	<li><img src="i/home_slide_main.jpg" alt="" title="" /></li>
      	<li><img src="i/home_slide_1.jpg" alt="" title="" /></li>
      	<li><img src="i/home_slide_2.jpg" alt="" title="" /></li>
      	<li><img src="i/home_slide_3.jpg" alt="" title="" /></li>
      	<li><img src="i/home_slide_main.jpg" alt="" title="" /></li>
      </ul>

      Comment


      • #4
        The script obviously uses a library

        Comment


        • #5
          prototype and scriptaculous, you're right. You don't want me to post those entire files do you?

          Comment


          • #6
            The trouble with tinysscript's solution is that the timeOut keeps on running.
            Try this:-

            Code:
            function fadeInOut(frame, start_frame, end_frame, delay, lis) {
            	return (function() {
            		lis = $('slide-images').getElementsByTagName('li');
            		Effect.Fade(lis[frame]);
            		if (frame == end_frame) [COLOR="Blue"]{ stopIt() }[/COLOR] 
            else { frame++;
            		lisAppear = lis[frame];
            		[COLOR="Blue"]tim1 = [/COLOR]setTimeout("Effect.Appear(lisAppear);", 0);
            		[COLOR="Blue"]tim2 = [/COLOR]setTimeout(fadeInOut(frame, start_frame, end_frame, delay), delay + 1850);
            }
            	})
            	
            }
            
            [COLOR="Blue"]function stopIt() {
            window clearTimeout(tim1);
            window.clearTimeout(tim2);
            }[/COLOR]
            Or if you prefer:-

            if (frame == end_frame) {window clearTimeout(tim1);window.clearTimeout(tim2) }
            Last edited by Philip M; Apr 14, 2009, 06:06 AM.

            All the code given in this post has been tested and is intended to address the question asked.
            Unless stated otherwise it is not just a demonstration.

            Comment


            • #7
              Thanks! Actually this worked just fine:
              Code:
              if (frame == end_frame) { return; } else { Effect.Fade(lis[frame]); frame++; }
              Now I'm trying to figure out how to tell it to speed up the display of the first image so it rotates through faster than the rest of the pictures...

              Comment

              Working...
              X