0

I'm using this photo gallery with this:

$('.normsize img:gt(0)').hide();
$('.photos a').click(function(){
    var index = $('.photos a').index(this);
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
});

with thumbnails in a div and the normal size pics next to it.

My question is: How would I bind the next and previous buttons . Its probably simpler than what I m using already.

Edit: Fixed code output.

OMG Ponies
  • 325,700
  • 82
  • 523
  • 502
seb
  • 1
  • 1
  • 2
  • I would but I can't post images supposedly.well Its just images in a div (thumbnails) and the next div is the normal sized pics. – seb May 19 '11 at 07:05
  • I didnt post my whole Jquery code since Its just css stuff not related to the index. – seb May 19 '11 at 07:07
  • I just dont know how to formulate it. – seb May 19 '11 at 07:07

1 Answers1

0

You have to store the current image index in a global variable.

var currentIndex = 0;
var lastIndex = $('.normsize img').size() - 1;

function showPic(index) {
    $('.normsize img:visible').hide();
    $('.normsize img:eq('+index+')').fadeIn();
    currentIndex = index;
}

$('.photos a').click(function() {
    showPic($('.photos a').index(this));
});

$('#next').click(function() {
    // If is the last go to first, else go to next
    showPic(currentIndex == lastIndex ? 0 : currentIndex + 1);
});

$('#prev').click(function() {
    // If is the first, go to last, else go to previous
    showPic(currentIndex == 0 ? lastIndex : currentIndex - 1);
});

$('.normsize img').hide(); // Hide all
showPic(0); // Initialize first picture shown
ariel
  • 15,620
  • 12
  • 61
  • 73
  • It works really well except that now I m stuck with another problem.When I go into the next gallery which is hidden when the first one is visible, the next and prev buttons follow the index of the first gallery,how do I make it follow the index of this second gallery? – seb May 19 '11 at 17:46
  • I realize I should've used the src attribute to switch between the thumbnails and the normal-sized images. Having to hide all the following galleries sounds like a newbie way to do things to me.Is it? – seb May 19 '11 at 17:48
  • you can store the image urls in an array, or you can just hide/show img elements, it's up to you. when you go to the second gallery just reset the currentIndex variable – ariel May 19 '11 at 19:32
  • Last question..How would I reset the index of the currentIndex variable? – seb May 20 '11 at 03:30
  • I finally made my photo galleries work the way I wanted thanks to you. I had a hard time though as a newbie. I learned that i had to unbind the click for each gallery and I did the index resetting and it works.I had to try a couple different things but it works now.The client is going to be happy. I think its more satisfying than using a plugin. I did that a couple of times. Grab a lightbox,copy the code but you don't learn anything that way.I m reading that book "from novice to ninja' and its the best Jquery book that Ive read yet. – seb May 21 '11 at 04:37