-1

を使用して独自の画像ギャラリーをコーディングしようとしています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;
    });

});

4

2 に答える 2

1

img_no現在アクティブな画像を識別し、次または前の画像を取得するために、各タグに追加しました

ワーキングデモ

$(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);
});
于 2013-07-27T06:52:32.907 に答える