从图库中获取下一个图像和上一个图像

Question

我正在尝试使用html css jquery对自己的图片库进行编码。我有一个模态窗口来显示点击的图像。在我的模态窗口中，我有一个上一个和下一个按钮。

我的问题是，当有人点击该按钮时，如何显示之前的图像或下一张图像。

这是我的jsFiddle

我用来显示点击图片的jquery代码。

$(function(){
$('.gallery a').click(function(evt) {
    evt.preventDefault( );
    var imgPath = $(this).attr('href');
    $('.gallery-overlay').show()
    .find('.gallery-image').attr('src',imgPath);
    return false;
    });

}）;

Answer 1

将此添加到您的jQuery。

在函数中声明一个可变的当前图像，并将当前图像保存在该变量中。每当更改当前图像时更新变量。

Updated jsfiddle

单击图像中的第二张图像，然后查看上一张图像和下一张图像。

$('.gallery-control-previous').click(function(){
        var imgPath = current_img.prev().attr('href');
        current_img = current_img.prev();
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
        var imgPath = current_img.next().attr('href');
        current_img = current_img.next();
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});

如果您已理解此答案，请将检查添加到显示下一个代码的代码中，只有当它们存在时才会显示。

你可以找到如何做到这一点，

here ..

更新

获取下一行的第一个孩子，然后通过。

$('.gallery-control-next').click(function(){

        if(current_img.next().length){
            current_img = current_img.next();
        }else{
            current_img = current_img.parents(".row").next(".row").find("a:first");
        }
        var imgPath = current_img.attr('href');
        $('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
    });

Answer 2

我已为每个标记添加img_no以识别当前活动图像并获取下一张或上一张图像

Working Demo

$(function () {
    $('.gallery a').click(function (evt) {
        evt.preventDefault();
        var imgPath = $(this).attr('href');
        var img_no = $(this).attr('img_no');
        $('.gallery-overlay').show()
            .find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
        return false;
    });
});
i = 1;
$('.row a img').each(function () {
    $(this).attr('img_no', i);
    $(this).parents('a').attr('img_no', i);
    i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
    var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
    img_no++;
    if (img_no > images_length) {
        img_no = 1;
    }
    $('.row a').each(function () {
        if ($(this).attr('img_no') == img_no) {
            imgPath = $(this).attr('href');
        }
    });
    $('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
    var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
    img_no--;
    if (img_no <= 0) {
        img_no = images_length;
    }
    $('.row a').each(function () {
        if ($(this).attr('img_no') == img_no) {
            imgPath = $(this).attr('href');
        }
    });
    $('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});