srobbin/jquery-backstretch — Issue #72: Slideshow with interruption when clicking a thumbnail to show a new image
Author: effell
Created: 2011-10-20 12:44:32+00:00
State: open

Hi,

First off, let me say how great this plugin is!

I've been trying to implement two features at once but can't get it to work. The idea is that when someone enter some page, there will be a slideshow running. This works. I also have thumbnails related to the bg images and what I want is that when someone clicks that thumbnail, the slideshow jumps to the selected image. I'm not even sure this is possible with backstretch but decided to try. Based on your examples, I came up with this:

```javascript
var images = [
"image1.jpg",
"image2.jpg",
"image3.jpg"
];

var index = 0;
$.backstretch(images[index], {speed: 500});

setInterval(function() {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index]);
}, 5000);

$("#img1").click(function() {
$.backstretch("image1.jpg");
});
$("#img2").click(function() {
$.backstretch("image2.jpg");
});
$("#img3").click(function() {
$.backstretch("image3.jpg");
});
```

And then my thumbs are linked like this:

There is probably an easy and simple way to achieve this. Can you please point me in the right direction? Thanks!

- Frederico