Question

I have a slide gallery, whereby when you click on a thumbnail, it retrieves the image reference in the thumbnail and displays it in the main panel.

Now I’ve added navigation controls but i’m not sure how to wire it altogether so that if you click on next/previous it navigate through the thumbnail and highlight the one you are on.

The code is too long to paste here, but here is the fiddle:

http://jsfiddle.net/calebo/QuXYV/

ps: JavaScript only, no jQuery.

Answer 1

I reworked your code and got it working here. I would recommend refactoring your code a bit to clean it up. I would say create an array of objects that hold the image url and the caption:

var objArray, obj;
for(var i = 0 ....) {
    obj = {
        url : "http://foobar.com/foo.png",
        caption : "Caption"
    };
    objArray.push(obj);
}
// then index with
var currObj = objArray[current];  // where 'current' is the variable you are using for state

Essentially what I did is move some of the code out of bindImage and into a function called ‘set’ (you probably want to rename this). I also commented out the line where you remove the anchor’s href.