2

我正在尝试设置一个图片库，您可以在其中单击拇指，然后您可以使用下一步和上一个按钮。我的问题是用户最初可以单击我需要检测的任何图像以及下一个或上一个图像将是的锻炼，并将显示 src 替换为下一个图像的 src。我只是想让下一个按钮首先工作，因为前一个按钮的工作原理相同。我一直在尝试使用 .next() 但它真的让我感到困惑。

对此的任何帮助都会很棒。

这是我所拥有的jsfiddle，下面是我编写的 jquery，问题是下一个按钮的底部位：

var numImgs = $('div.locationGallery .polaroidImage').length;
var prevImages = $('.polaroidImage').prevAll().length;
var thisImage;
var imageClicked;
var nextImage;
var nextImage;

$('.polaroidImage').click(function(){
    var prevImages = $(this.parentNode).prevAll().find('.polaroidImage').length;
    if(prevImages > 0){
        $('.prev').show();
    }else{
        $('.prev').hide();
    }
    if(prevImages == (numImgs - 1)){
        $('.next').hide();
    }else{
        $('.next').show();
    }
});

$(".thumb").click(function(){
      imageClicked = '';
      imageClicked = $(this).attr('src');
    $(".imageDisplay").find('img').remove();
    $(".imageDisplay").append("<img src='"+imageClicked+"' />")
});

$('.next').click(function(){
    nextImage = $('.imageContainer').next('img').attr('src');
    alert(nextImage);
});
4

4 回答 4

5

这是一个使用上一个和下一个按钮的示例：http: //jsfiddle.net/8FMsH/1/ 在拇指单击时，您需要保存当前图像：

$(".thumb").click(function(){
  imageClicked = $(this);
  $(".imageDisplay").find('img').remove();
  $(".imageDisplay").append("<img src='"+imageClicked.attr('src')+"' />")
});

$('.next').click(function(){
 imageClicked.closest('.imageContainer').next().find('img').trigger('click');
});

$('.prev').click(function(){
 imageClicked.closest('.imageContainer').prev().find('img').trigger('click');
});
于 2013-05-17T14:51:12.057 回答
1

您需要在点击时设置当前图像：

thisImage = $(this).closest('.imageContainer');

然后将下次单击的代码更改为：

nextImage = thisImage.next().find('.thumb').attr('src');

请参阅http://jsfiddle.net/c9Jkv/24/上的示例

于 2013-05-17T14:43:50.383 回答
0

selected我已经通过在当前选定的图像上添加一个类并使用它来“找到”下一个拇指来更新您的代码。

http://jsfiddle.net/c9Jkv/25/

不过，这似乎很做作，如果您只维护某种数据结构，例如数组或对象或其他可能使其更容易的东西，而不是依赖 DOM 来做所有事情，这可能会更容易一些。

于 2013-05-17T14:45:29.360 回答
-2

我建议使用Colorbox或Shadowbox

于 2013-05-17T14:44:20.147 回答