Question

我是Javascript的新手，我在实现PhotoSwipe插件时遇到了问题：

我正在尝试使用jQuery为网页实现PhotoSwipe插件。大多数工作正常（打开一个画廊，导航幻灯片）。关闭图库时会出现问题。问题：

我点击图片1，打开PhotoSwipe灯箱，我导航到幻灯片2，然后关闭图库。这关闭了画廊。但关闭动画是为图像1播放的，而我期待它为图像2播放。

它在PhotoSwipe演示页面上正常工作，因此在我的代码中出错。如果我复制/粘贴演示页面的Javascript代码，它可以正常工作。

我相信我错过了一些代码，这些代码会将当前显示的幻灯片与相应的缩略图绑定。我在演示页面的主要问题是：我很难理解vanilla JS演示，哪个部分负责什么动作。 请帮我查找缺少的功能。

这是我的PhotoSwipe“点击开始画廊”活动的代码：

$('.my-gallery').each( function() {
    var $pic     = $(this);
    var items = itemArray;

    var $pswp = $('.pswp')[0];
    $pic.on('click', 'figure', function(event) {
        event.preventDefault();

        var $index = $(this).index();
        var options = {
            index: $index,
            getThumbBoundsFn: function(index) {
                // get element we clicked on to determine its position in window
                var thumbnail = event.target;
                // get position of element relative to viewport
                var rect = thumbnail.getBoundingClientRect();
                // get window scroll Y
                var pageYScroll = window.pageYOffset ||
                    document.documentElement.scrollTop; 
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }
        }
        // Initialize PhotoSwipe
        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, items, options);
        lightBox.init();
    });
});

我的画廊（剥离到2张幻灯片）：

<div class="row my-gallery" itemscope itemtype="http://schema.org/ImageGallery" id="img-gallery">
    <figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
        <a href="images/nature/DSC_7216.jpg" itemprop="contentUrl" data-size="1200x795">
            <img src="images/nature/DSC_7216_t.jpg" itemprop="thumbnail">
        </a>
    </figure>
    <figure itemprop="associatedMedia" itemscope="" itemtype="http://schema.org/ImageObject">
        <a href="images/nature/DSC_7218.jpg" itemprop="contentUrl" data-size="1200x795">
            <img src="images/nature/DSC_7218_t.jpg" itemprop="thumbnail">
        </a>
    </figure>
</div>

项目数组是从JSON生成的：

[
    {
        "src": "images/nature/DSC_7216.jpg",
        "msrc": "images/nature/DSC_7216_t.jpg",
        "w":1200,
        "h":795
    },
    {
        "src": "images/nature/DSC_7218.jpg",
        "msrc": "images/nature/DSC_7218_t.jpg",
        "w":1200,
        "h":795
    }
]

JSON被硬编码到p元素中，使用jQuery解析器解析：

var itemArray = jQuery.parseJSON($(imageListSelector).html());

您可以找到full page with problem on GitHub

PhotoSwipe demo on Codepen

你能帮我找到我错过的东西吗？

修改 我已经将问题跟踪到原始PhotoSwipe演示中的这部分代码：

var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail

如果我用固定的缩略图选择器替换这个部分（就像我在我的jQuery中 - 它包含“事件目标”参考），我可以强制PhotoSwipe演示重复我的行为 - 缩小在同一图像上执行。与我的情况完全不同，但足够接近。

现在我只需要弄清楚如何更改我的getThumbBoundsFn以使用实际的缩略图引用而不是event.target ...我可能需要更新我的itemArray以包含指向{{1的链接元素，就像最初的PhotoSwipe演示一样。正如我之前所写，我仍然是Javascript的新手，所以弄清楚一些事情需要时间。任何帮助将不胜感激。

Answer 1

自己想出来。我使用event.target搞砸了。使用PhotoSwipe的正确方法要求我提供实际的DOM元素而不是固定的元素（如事件目标）。

这样做的正确方法就像演示一样：在创建itemArray时保存DOM元素（选择器）使用itemArray中的DOM元素，以便提供正确的元素来计算边界矩形。

更正jQuery代码：

var gallerySelector = "#img-gallery";
var imageListSelector = "#imageList";
// parse server reply (JSON, imitated, saved into a tag)
var itemArray = jQuery.parseJSON($(imageListSelector).html());

var index = 1;
// HTML structure of gallery image
var imageHTML = "<figure class=\"col-xs-12 col-sm-6 col-md-4\" " + 
    "itemprop=\"associatedMedia\" itemscope " + 
    "itemtype=\"http://schema.org/ImageObject\">\n" +
    "<a href=\"{imageSource}\" itemprop=\"contentUrl\" data-size=\"{imageSize}\">\n" +
    "<img class=\"img-responsive\" src=\"{imageThumb}\" itemprop=\"thumbnail\" />\n" +
    "</a>\n</figure>";
// generate images based on JSON request (imitated) and appended them to the page
itemArray.forEach(function(item) {
    var imageTags = imageHTML.replace("{imageSource}", item.src);
    var imageTags = imageTags.replace("{imageSize}", (""+item.w+"x"+item.h));
    var imageTags = imageTags.replace("{imageThumb}", item.msrc);
    $(gallerySelector).append(imageTags);
    item.el = $(gallerySelector + " figure:last img")[0];
});

$('.my-gallery').each( function() {
    var $pic     = $(this);
    var $pswp = $('.pswp')[0];
    $pic.on('click', 'figure', function(event) {
        event.preventDefault();
        var $index = $(this).index();
        var options = {
            index: $index,
            getThumbBoundsFn: function(index) {
                // get element we clicked on to determine its position in window
                //var thumbnail = event.target;
                var thumbnail = itemArray[index].el;
                // get position of element relative to viewport
                var rect = thumbnail.getBoundingClientRect();
                // get window scroll Y
                var pageYScroll = window.pageYOffset ||
                    document.documentElement.scrollTop; 
                return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
            }
        }
        // Initialize PhotoSwipe
        var lightBox = new PhotoSwipe($pswp, PhotoSwipeUI_Default, itemArray, options);
        lightBox.init();
    });
});

变更摘要：

添加了item.el属性，该属性在将最后添加的元素附加到库中时保存（在我的情况下为figure img，因为我需要img对象来计算其边界矩形）。

将event.target替换为相应的itemArray[index].el（之前保存的节点）。

希望这会有所帮助！我花了几个小时的时间和PhotoSwipe演示页面进行了一些反复试验来解决这个问题。

PhotoSwipe：关闭图库动画错误的矩形（缩略图）

1 个答案: