Question

我正在尝试构建自己的简单jQuery灯箱库。我背后的逻辑如下：只显示缩略图＆amp;最初创建。这些链接到完整尺寸的图像。

            <section class="gallery-set">
                <a href="img/about/gallery/a1.1.jpg">
                    <img src="img/about/gallery/thumb1.1.jpg" alt=""
                    height="192" width="383">
                </a>
                <a href="img/about/gallery/a1.jpg">
                    <img src="img/about/gallery/thumb1.jpg" alt=""
                    height="192" width="383">
                </a>
                <a href="img/about/gallery/a2.1.jpg">
                    <img src="img/about/gallery/thumb2.1.jpg" alt=""
                    height="192" width="383">
                </a>
            </section>

因此，当您单击这些缩略图中的任何一个时，我会动态创建一个叠加灯箱和所有全尺寸图像，仅显示链接到您单击的缩略图的图像。虽然其他图像也已创建，但现在这些都是隐藏的。

function lightBox() {

    var gallery = $('.gallery-set'),
        overlay = $('<div/>', {id: 'overlay'});

    overlay.appendTo('body').hide();

    gallery.on('click', 'a', function(event) {
        event.preventDefault();
        var clickedThumb = $(this),
            clickedThumbPath  = $(this).attr('href'),
            clickedImg = $('<img>', {src: clickedThumbPath, alt: 'fullSizeImage', class: 'current'}),
        prevThumbs = clickedThumb.prevAll(),
        nextThumbs = clickedThumb.nextAll();

        prevThumbs.each(function() {
            var prevImg = $('<img>', {src: $(this).attr('href'), class: 'prev non-current'});
            prevImg.appendTo(overlay);
        });
        clickedImg.appendTo(overlay);
        nextThumbs.each(function() {
            var nextImg = $('<img>', {src: $(this).attr('href'), class: 'next non-current'});
            nextImg.appendTo(overlay);
        });

    overlay.show();
    })
.....
.....
}

现在，当您单击第二个缩略图时，jQuery会动态创建所有全尺寸图像，这就是HTML结构的样子：

现在我有了这个结构，我可以通过左右箭头轻松遍历全尺寸图像。当前图像被隐藏，下一个图像被显示出来。对于这个逻辑，我使用两个类，当前和非当前，其中第一个类将display设置为block而第二个设置为none。这段代码在lightbox（）函数中：

$(document).on('keyup', function(event) {

        var pressed = event.keyCode || event.which,
            arrow = {left: 37, right: 39};

        switch(pressed) {
            case arrow.left:
                var curr = overlay.find('.current'),
                    prev = curr.prev();
                if(curr.hasClass('current')) {
                    curr.removeClass('current').addClass('non-current');
                } else {
                    curr.addClass('non-current');
                }
                if(prev.hasClass('non-current')) {
                    prev.removeClass('non-current').addClass('current');
                } else {
                    prev.addClass('current');
                }
                break;
            case arrow.right:
                var curr = overlay.find('.current'),
                    next = curr.next();
                curr.removeClass('current').addClass('non-current');
                next.removeClass('non-current').addClass('current');
                break;
        }
    });

    overlay.on('click', function() {
        overlay.hide();
        overlay.find('img').remove();
    });

});

第一次一切正常。但是，一旦我关闭灯箱并尝试再次打开它，将打开正确的图像，但箭头功能已消失。我不明白为什么 - 因为每次用户点击图库并动态创建事件监听器（箭头）时，我就会动态创建完整大小的图像。

只是为了记录，我在结束标记之前的HTML文件中调用了这个lightbox（）函数。

任何想法都非常感激。此外，如果有更简单/更好的方法，请告诉我！我不想使用任何插件，因为我认为这非常简单明了。或者，我认为这应该是我应该说的简单。

jQuery Lightbox库只工作一次

0 个答案: