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:
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:
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.