Question

我使用html列表创建了一个jquery照片库。我在使用上一个和下一个按钮时遇到问题。在加载后立即打开照片时，它们可以正常工作。如果我关闭图库，请转到另一张照片并单击它以打开我的下一个和上一个变量，一些如何不能正常工作，他们跳过照片。我要做的是使用变量和jquery .next和.previous作为箭头。

非常感谢您对此的任何帮助。

我在这里有一个演示http://jsbin.com/uvikug/11/edit

打开照片的代码，下一个和上一个按钮具体是这个，但你可以在那个链接上看到所有这些：

$(".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

基本上你的代码一点也不差，只是一个小问题，它是每次有人点击<li class="photo" />时附加事件处理程序。

只需放置块

$("#prev").click(function() {..和"$("#next").click(function() { ..."以及阻止"$(".photo").click(function() { ... })"的所有代码。

它会正常工作。

jquery photogallery使用列表

1 个答案: