Question

I have a slider that when you click next and previous, the images slide left or right. But I’m having trouble integrating my thumbnails, when if i want to click on a thumbnail, the image will show and then you can click next and previous.

Right now my thumbnails can be clicked, and it shows up but when I click next or previous, its stuck on the same image

I have set up a jsfiddle if someone can help me? first you can see that next and previous will switch images, but once you click on the thumbnails and try next and previous, it won’t change images

http://jsfiddle.net/aQTZ9/14/

Thank you!

EDIT: Do i have to set an array or something? I’m not sure how it will know which image will be next or previous when clicking the links

Answer 1

In your .image click handler, you do this:

$('#slides img').attr('src', rel);

That will set the src attribute of all the images to rel. So nothing is getting stuck, it just looks that way because all the images in the gallery will be the same after you click on one of the thumbnails.

Instead, you need to use the rel attribute to find the correct image in the gallery and then call rightImage or leftImage enough times to get it into view. Or, you could add a third function that does the same thing as multiple rightImage or leftImage calls without the intermediate steps.

Here are some hints.

1. Get rid of the $('.thumbnail-photos').mouseover stuff, that just ends up binding a new set of click handlers every time the mouse moves over the a thumbnail. Move click handler binding inside there to the outside before you delete it though.

2. Add id attributes the slide <li> elements to make them easier to find.

3. Replace the rel attributes with data-slide attributes, the values should match the id attributes` above. This makes it easy to link the thumbnails directly to their slides.

4. Now the click handler on the thumbnails can get the slide with var $li = $('#' + $(this).data('slide')) (or var $li = $('#' + $(this).attr('data-slide')) in older versions of jQuery).

5. Now that you have the right $li, you should be able to figure out which direction and how far you need to animate the left value of $('#slides ul').