CODEWITHSUNDEEP
javascriptimagepaginationgallery
Stephan - the curious
Stephan - the curious

Reputation: 433

Image gallery pagination

I have created the following image gallery.

http://jsfiddle.net/sfiddle/Nf7yR/7/

I think the thing is, that even though I can get a hand on the paragraphs css, the currentIndex won't update, i.e. an event listener seems to be missing.

var thumb = document.getElementById("thumb");
myParagraphs = thumb.getElementsByTagName("p");

console.log(myParagraphs[1]);

function thumby(){
$(myParagraphs[currentIndex]).css("background-color", "red");
}

thumby();

The thing is that I can not manage to link the image index with the index of the pagination dot (which has a normal p tag).

I want to code it in that way that if the first picture is displayed the first dot is red, if the second image is displayed the second ...

How could I approach this?

Thanks for any good advice as I invested a few hours already but can not get my head around it.

PS: no, I want no plugin or ready made imagegallery, I want my approach to work :-)

Upvotes: 0

Views: 1278

Answers (1)

ghost
ghost

Reputation: 769

You made a function thumby() but you are calling it only once (during script start). You just need to call it when you change currentIndex. Here you have fixed code: http://jsfiddle.net/Nf7yR/10/ (I commented my edits).

BTW your code looks terrible. You should indent it properly to make it easier to read :)

Upvotes: 1

Related Questions