Question

我正致力于从头开始创建类似灯箱的功能。到目前为止，我有接管元素工作并正确显示图像，但现在我想编码下一个/上一个按钮。我还希望按钮在图库中循环（如果在第一张图像上点击“上一张”，它会加载最后一张图像，反之亦然）。

以下是显示我的图片缩略图的HTML：

<div id="gallery-wrapper">
    <ul>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
        <li><a href="/path/to/large/image" class="image"><img src="/path/to/thumbnail" alt="Image" /></a></li>
    </ul>
</div>

单击图像缩略图时，将生成灯箱并通过Javascript：

显示

$(document).ready(function() {
    $('.image').click(function(e) {
        e.preventDefault();
        $('body').width($('body').width());
        $('body').css('overflow', 'hidden');
        var image_href = $(this).attr("href");
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }
        else { 
            var lightbox =
            '<div id="lightbox">' +
                '<div id="content">' +
                    '<div class="close-gallery">Close<span>X</span></div>'+
                    '<div class="gallery-previous"></div>'+
                    '<img src="'+ image_href +'" />' +
                    '<div class="gallery-next"></div>'+
                '</div>' +
            '</div>';
            $('body').append(lightbox);
        }
    });
    $('body').on('click', '.close-gallery', function () {
        $('body').removeAttr('style');
        $('#lightbox').remove();
    });
});

这是我到目前为止所尝试过的。它仅适用于当前所选图像之前或之后的兄弟姐妹：

$(document).ready(function($) {
    $('.image').click(function(e) {
        $(this).addClass('active');
        e.preventDefault();
        $('body').width($('body').width());
        $('body').css('overflow', 'hidden');
        var image_href = $(this).attr("href");
        var prevImage = $('.active').parent().prev().find('a').attr("href");
        var nextImage = $('.active').parent().next().find('a').attr("href");
        console.log(prevImage, nextImage);
        if ($('#lightbox').length > 0) { 
            $('#content').html('<img src="' + image_href + '" />');
            $('#lightbox').show();
        }
        else { 
            var lightbox =
            '<div id="lightbox">' +
                '<div id="content">' +
                    '<div class="close-gallery">Close<span>X</span></div>'+
                    '<div class="gallery-previous" data-nav="'+ prevImage +'"></div>'+
                    '<img src="'+ image_href +'" />' +
                    '<div class="gallery-next" data-nav="'+ nextImage +'"></div>'+
                '</div>' +
            '</div>';
            $('body').append(lightbox);
        }
    });
    $('body').on('click', '.gallery-previous', function () {
        var prev = $(this).data('nav');
        console.log(prev);
        $('#content').find('img').attr('src',prev);
    });
    $('body').on('click', '.gallery-next', function () {
        var next = $(this).data('nav');
        console.log(next);
        $('#content').find('img').attr('src',next);
    });
    $('body').on('click', '.close-gallery', function () {
        $('body').removeAttr('style');
        $('#lightbox').remove();
    });
});

我的想法是用下一个/上一个图像链接替换当前的灯箱图像src，但我无法弄清楚我将如何实现这一目标。任何帮助都很大的帮助！

如何编写自定义“灯箱”的下一个/上一个按钮

0 个答案: