jquery photogallery using list

Question

I've made a jquery photo gallery using html lists. I'm having trouble with the previous and next buttons. When you open a photo right after load they work correctly. If I close the gallery, go to a different photo and click it to open my next and previous variables some how aren't working correctly anymore, they skip photos. What I'm trying to do is use variables and jquery .next and .previous for the arrows.

Thanks so much for any help on this.

I have a demo of it here http://jsbin.com/uvikug/11/edit

The code for opening a photo, next and previous buttons specifically is this, but you can see all of it at that link:

$(".photo").click(function() {
  $("#loading_box_container").animate({
    height: "100%"
  }, 300, function() {
      $("#close").css({
        display: "block"
      });        
  });

  id = $(this).attr('id');
  $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');

  fadeIn('#' + id);


  $("#next").click(function() {  
    if (!$('#' + id).hasClass("last")) {
      $("#preload").fadeOut(500, function() {
      var id_a = $('#' + id).next().attr('id');
      id = id_a;

      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id_a + '.jpg');

      fadeIn('#' + id_a);
      });
    }
  });

  $("#prev").click(function() {
    if (!$('#' + id).hasClass("first")) {
      $("#preload").fadeOut(500, function() {
      var id_b = $('#' + id).prev().attr('id');
      id = id_b;  

      $('#preload').prop('src', 'http://www.klossal.com/klossviolins/gallery/fulls/' + id + '.jpg');

      fadeIn('#' + id); 
      });
    }
  }); 
});

Answer 1

Basically your code is not bad at all, just one minor issue, it is attaching the event handler every time someone clicks on the <li class="photo" />.

Just put the blocks

$("#prev").click(function() {.. and "$("#next").click(function() { ..." and every such code out side of the block "$(".photo").click(function() { ... })".

And it will work fine.