从图库中获取下一张图片和上一张图片

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);
});