Newbie; Next/Previous in a Slideshow-script

Hi!

I don’t know anything about JavaScript but I’ve found a simple Slideshow-script which I like. For example, if you click on 3, image number 3 will show up in the Slideshow. I also managed to Google some code that makes it swipe through the images automatically with a 5 second interval. The only thing I miss with the script is “Next”/“Previous” links to be able to go through the image sequence directly instead of having to wait 5 seconds. I would appreciate it a lot if someone could help me out with this!

I’m attaching what I believe is the important part of the code:

    <a href="#" onclick="$('.slideshow').blinds_change(0); return false">1</a>
    <a href="#" onclick="$('.slideshow').blinds_change(1); return false">2</a>
    <a href="#" onclick="$('.slideshow').blinds_change(2); return false">3</a>
    <a href="#" onclick="$('.slideshow').blinds_change(3); return false">4</a>
    <a href="#" onclick="$('.slideshow').blinds_change(4); return false">5</a>
    <a href="#" onclick="$('.slideshow').blinds_change(5); return false">6</a>
    <a href="#" onclick="$('.slideshow').blinds_change(6); return false">7</a>

    <a href="#" onclick="???????????">Previous</a>
    <a href="#" onclick="???????????">Next</a>

    <script type="text/javascript">
      $(window).load(function () {
        $('.slideshow').blinds();
        var i = 1;
        setInterval(function () {
          if ( i == 7 ) i = 0;
          $('.slideshow').blinds_change(i);
          i ++;
        }, 5000);
      });
    </script>

You can see the example here:
http://neobux-guide.com/slideshow/

Thank you!

To achieve that, you’re going to want previous() and next() functions. that can achieve that.

We can easily get a next() function by modifying the existing code, which results in:


function next() {
    if ( i == 7 ) i = 0;
        $('.slideshow').blinds_change(i);
        i ++;
    }
}
...
setInterval(next, 5000);

You can use similar code for the previous() function too.

The only other thing to do now, is to stop the setInterval when the previous/next buttons are being used. You can do that by initially assigning setInterval to a variable, so that you can then later remove by using clearInterval

That could be done with something like:


var i = 1,
    timer = setInterval(next, 5000);

So that later on, when you want to run the previous or next functions separately, you can clear the interval with:


clearInterval(timer);

Thanks alot for you answer! As my knowledge about JavaScript is about zero I’m getting a bit confused about this.

Am I on the right path here?

    <a href="#" onclick="prev(); return false">Previous</a>
    <a href="#" onclick="next(); return false">Next</a>

    <script type="text/javascript">
    $(window).load(function () {
      $('.slideshow').blinds();
      var i = 1;
      timer = setInterval(next, 5000);
      function next() {
        if ( i == 7 ) i = 0;
        clearInterval(timer);
        $('.slideshow').blinds_change(i);
        i ++;
      }
    });
    function prev() {
      if ( i == 7 ) i = 0;
      clearInterval(timer);
      $('.slideshow').blinds_change(i);
      i --;
    }
    </script>

Yes, you’re getting there. You will need to think about what changes need to occur to the prev() function.

The next() function checks if the i variable is too high, and if it is it then brings it down again.
You need something different for the prev() function. There, you need to check if i is too low instead.