www.webdeveloper.com
Results 1 to 5 of 5

Thread: Need help with Javascript Slideshow to work correctly with the counter

Hybrid View

  1. #1
    Join Date
    Jun 2012
    Posts
    3

    Need help with Javascript Slideshow to work correctly with the counter

    Hello all,

    For the life of me I cannot figure out how to counter to sync up with images for this slideshow. The images scroll correctly to the next and previous but the counter starts at "1" and then goes to "1" again and then properly in sequence. When I click previous the numbers jump incorrectly once and then goes in sequence correctly but does not correspond with the images correctly. HELP!

    Here's the script. Thanks!

    <script type='text/javascript'>

    var imagelist=new Array(
    "images/2008_Galileo/Galileo_1.jpg",
    "images/2008_Galileo/Galileo_2.jpg",
    "images/2008_Galileo/Galileo_3.jpg",
    "images/2008_Galileo/Galileo_4.jpg",
    "images/2008_Galileo/Galileo_5.jpg",
    "images/2008_Galileo/Galileo_6.JPG",
    "images/2008_Galileo/Galileo_7.jpg",
    "images/2008_Galileo/Galileo_8.jpg"
    )
    // INITIALIZE COUNTER
    var counter=0;
    // IMAGE SWITCH
    function SwapImage(theName,theSource) {
    document.images[theName].src=theSource;
    }
    // NEXT IMAGE
    function NextImage() {
    counter=((counter<imagelist.length-1)?counter+1:0);
    SwapImage("slide",imagelist[counter]);
    }
    // BACK IMAGE
    function BackImage() {
    counter=((counter>0)?counter-1:imagelist.length-1);
    SwapImage("slide",imagelist[counter]);
    }
    function slideShow(direction){

    if (direction == 'NextImage' && counter <=8){
    counter++;
    }

    if (direction == 'BackImage' && counter >=0){
    counter --;
    }

    document.getElementById("show").innerHTML = (counter+1)+"/8"
    }
    </script>

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,684
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type='text/javascript'>
    
    var imagelist=[
    "http://www.vicsjavascripts.org.uk/StdImages/One.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Two.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Three.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Four.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Five.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Six.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Seven.gif",
    "http://www.vicsjavascripts.org.uk/StdImages/Eight.gif"
    ];
    // INITIALIZE COUNTER
    var counter=0;
    // IMAGE SWITCH
    function SwapImage(theName) {
    document.getElementById(theName).src=imagelist[counter];
    document.getElementById("show").innerHTML = (counter+1)+"/8";
    }
    // NEXT IMAGE
    function NextImage() {
    counter=((counter<imagelist.length-1)?counter+1:0);
    SwapImage("slide");
    }
    // BACK IMAGE
    function BackImage() {
    counter=((counter>0)?counter-1:imagelist.length-1);
    SwapImage("slide");
    }
    </script>
    </head>
    
    <body>
    <input type="button" name="" value="Next" onmouseup="NextImage()" />
    <input type="button" name="" value="Back" onmouseup="BackImage()" />
    <br />
    <img id="slide" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="100" height="100" />
    <div id="show" >1/8</div>
    
    </body>
    
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2012
    Posts
    3
    Thank You Vic! Works brilliantly! Life saver!

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,391

    Lightbulb

    Suggestion ...
    Alter this line:
    Code:
    document.getElementById("show").innerHTML = (counter+1)+"/8";
    To:
    Code:
    document.getElementById("show").innerHTML = (counter+1)+"/"+imagelist.length;
    That way if you change the number of images to display
    you will not need to go back into the code to change all the "/8" lines.

    Does not alter Vic's fine code, just makes it easier to use elsewhere if the need arises.

  5. #5
    Join Date
    Jun 2012
    Posts
    3
    Even better. Thanks!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles