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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Limiting cycling in Javascript slideshow code?

    Dear Forum Members

    HI, I am no coder, however I am modifying my website and changing the slideshow to the one found on this website, most wonderful,
    the Cut & Paste JavaScript Slideshow( http://www.javascriptkit.com/script/.../jsslide.shtml )

    I have it working now, and I have but one question, does the code include a way to limit the number of times that it cycles through the slides? So it just freezes on one photo after x number of cycles?

    many thanks, and happy holidays...
    Last edited by yoowho; 12-25-2011 at 12:50 AM. Reason: bug

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    I believe if you change to the section below it will do what you desire after 3 cycles.
    Change the cycleLimit variable for other counts.
    Code:
    <a href="javascript:gotoshow()"><img src="food1.jpg" name="slide" border=0 width=300 height=375></a>
    <script type="text/javascript">
    
    //configure the paths of the images, plus corresponding target links
      slideshowimages("food1.jpg","food2.jpg","food3.jpg","food4.jpg","food5.jpg")
      slideshowlinks("http://food.epicurious.com/run/recipe/view?id=13285","http://food.epicurious.com/run/recipe/view?id=10092","http://food.epicurious.com/run/recipe/view?id=100975","http://food.epicurious.com/run/recipe/view?id=2876","http://food.epicurious.com/run/recipe/view?id=20010")
    
    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=2000;
    var cycleLimit = 3 * slideshowimages.length;
    var whichlink=0;
    var whichimage=0;
    
    function slideit(){
      if (!document.images) { return; }
      document.images.slide.src=slideimages[whichimage].src;
      whichlink=whichimage;
      if (whichimage<slideimages.length-1) {
        whichimage++;
      } else {
        whichimage=0;
      };
      cycleLimit--;
      if (cycleLimit >= 0) { setTimeout("slideit()",slideshowspeed); }
    }
    slideit();
    
    </script>
    <p align="center"><font face="arial" size="-2">This free script provided by</font><br>
    <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">JavaScript
    Kit</a></font></p>
    Code is untested at this time, but it should work.
    Basically, I'm just turning off the setTimeout function after a number of cycles through the image list.

  • Users who have thanked jmrker for this post:

    yoowho (12-24-2011)

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    it seems to be rather ancient code you can do it like this:

    Code:
    <body>
    <img src="pic3.jpg" id="pic"></div>
    <script type="text/javascript">
    var pics=["pic1.jpg", "pic2.jpg","pic3.jpg" ]
    var j=0;
    var loop=0;
    var slideshowspeed=2000;
    int=setInterval(show,slideshowspeed)
    function show() {
    document.getElementById("pic").src=pics[j++%pics.length]
    if (j++%pics.length==0){loop++;}
    if (loop==2){clearInterval(int)}
    }
    </script>
    
    </body>
    and change the 2 in the line if (loop==2){clearInterval(int)} to how many loops you want to do before it stops

  • Users who have thanked xelawho for this post:

    yoowho (12-24-2011)

  • #4
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Big Thanks but dang, I couldn't get either suggestion to work

    @jmrker-for whatever reason pasting in your code didn't show results.

    @xelawho- i am unclear on a few things, I tried as many possibilities as I could but none obtained results
    -is this a replacement for the entire slideshow? or is it to be inserted as part of the slideshow and if so, can you be more specific?
    -it would seem that i would have to rename the jpgs by adding the pic prefix?
    thanks

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    yes, it's a replacement for the entire thing, although it doesn't have the links feature that the original does, but that is easy to add.

    you could rename your pics, or else just change the lines in the code I gave you from:
    Code:
    <img src="pic3.jpg" id="pic">
    to:
    Code:
    <img src="food1.jpg" id="pic">
    and the line:
    Code:
    var pics=["pic1.jpg", "pic2.jpg","pic3.jpg" ]
    to:
    Code:
    var pics=["food2.jpg","food3.jpg","food4.jpg","food5.jpg",
    "food1.jpg" ]
    to have it working with the same images as the example you posted.

  • #6
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    to @xelawho

    so in this version, the size of the slideshow is defined by the size of the jpegs rather than instructions at the top of the code as in original?

    seems so since I see the first image, but that's all I see, it doesn't change...will play some more

    but no slideshow at present

    this is what i have put up, as the jpegs are in a separate folder (Slideshow) they are shown as such
    but in dreamweaver, in the var pics line, each jpeg number is in red, which I believe means that they don't link up...
    <img src="Slideshow/7.jpg" id="pic"></div>
    <script type="text/javascript">
    var pics=[Slideshow/1.jpg","Slideshow/2.jpg","Slideshow/3.jpg","Slideshow/4.jpg","Slideshow/5.jpg","Slideshow/6.jpg","Slideshow/7.jpg ]
    var j=0;
    var loop=0;
    var slideshowspeed=2000;
    int=setInterval(show,slideshowspeed)
    function show() {
    document.getElementById("pic").src=pics[j++%pics.length]
    if (j++%pics.length==0){loop++;}
    if (loop==2){clearInterval(int)}
    }
    </script>
    thanks
    Last edited by yoowho; 12-24-2011 at 08:26 PM. Reason: figuring it out

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    3,020
    Thanks
    56
    Thanked 566 Times in 563 Posts
    try it with this:

    Code:
    var pics=["Slideshow/1.jpg","Slideshow/2.jpg","Slideshow/3.jpg","Slideshow/4.jpg","Slideshow/5.jpg","Slideshow/6.jpg","Slideshow/7.jpg" ]

  • Users who have thanked xelawho for this post:

    yoowho (12-24-2011)

  • #8
    New to the CF scene
    Join Date
    Dec 2011
    Posts
    4
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @xelawho

    trouble shooting some issues
    Last edited by yoowho; 12-25-2011 at 01:00 AM.

  • #9
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,146
    Thanks
    39
    Thanked 505 Times in 499 Posts

    Lightbulb

    Quote Originally Posted by yoowho View Post
    Big Thanks but dang, I couldn't get either suggestion to work

    @jmrker-for whatever reason pasting in your code didn't show results.

    ...
    Since you did not paste the code you were testing, it is difficult to tell you what you may be doing wrong.

    Here is some modified and tested code.
    Change the appropriate links for the images and re-directions.

    Code:
    <!DOC HTML>
    <html>
    <head>
    <title> Limit Loop Gallery </title>
    <script type="text/javascript">
    
    /*
    JavaScript Image slideshow:
    By JavaScript Kit (www.javascriptkit.com)
    Over 200+ free JavaScript here!
    
    // Updated and modified by: jmrker
    // For: http://www.codingforums.com/showthread.php?p=1173890#post1173890
    */
    
    //configure the paths of the images, plus corresponding target links
    var slideimages = [
      "http://www.javascriptkit.com/script/script2/photo1.jpg",
      "http://www.javascriptkit.com/script/script2/photo2.jpg",
      "http://www.javascriptkit.com/script/script2/photo3.jpg"  // No comma after last entry
    ];
    var slidelinks = [
      "http://food.epicurious.com/run/recipe/view?id=13285",
      "http://food.epicurious.com/run/recipe/view?id=10092",
      "http://food.epicurious.com/run/recipe/view?id=100975"    // No comma after last entry
    ];
    
    //configure the speed of the slideshow, in miliseconds
    var slideshowspeed=2000;
    var cycleLimit = 3 * slideimages.length;
    var whichimage=0;
    
    function slideit(){
      if (!document.images) { alert('Very old machine'); return; }
      document.getElementById('slide').src = slideimages[whichimage];
      if (whichimage < slideimages.length-1) { whichimage++; }
                                        else { whichimage=0; };
      cycleLimit--;  
      if (cycleLimit > 0) { setTimeout("slideit()",slideshowspeed); }
    // alternative halt
    //  if (cycleLimit == 0) { clearTimeout(); }
    }
    window.onload = function() {
      slideit();
    }
    </script>
    
    </head>
    <body>
    <a href="javascript:location.href=slidelinks[whichimage]">
     <img src="" id="slide" border=0 width=300 height=375>
    </a>
    
    <p align="center">
     <font face="arial" size="-2">This free script provided by</font><br>
     <font face="arial, helvetica" size="-2"><a href="http://javascriptkit.com">
     JavaScript Kit</a></font>
    </p>
    
    </body>
    </html>


  •  

    Posting Permissions

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