PhotoSwipe:关闭图库会为错误的矩形设置动画(缩略图)

本文介绍了PhotoSwipe:关闭图库会为错误的矩形设置动画(缩略图)的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是Java的新手，在实现PhotoSwipe插件时遇到问题:

I'm new to Javascript and I have a problem implementing PhotoSwipe plugin:

我正在尝试使用jQuery为网页实现PhotoSwipe插件.大多数功能都可以正常工作(打开图库，浏览幻灯片).关闭画廊时会发生问题.问题:

I'm trying to implement PhotoSwipe plugin for a web page using jQuery. Most of it is working correctly (opening a gallery, navigating slides). The problem happens when I close the gallery. The problem:

我单击图像1，这将打开PhotoSwipe灯箱，导航至幻灯片2，然后关闭图库.这将关闭画廊.但是，为图片1播放关闭动画，而我希望为图片2播放.

I click on image 1, this opens PhotoSwipe lightbox, I navigate to slide 2, and then close the gallery. This closes the gallery. But closing animation is played for image 1, while I am expecting it to be played for Image 2.

它在PhotoSwipe演示页面上可以正常工作，所以我的代码中有错误.如果我复制/粘贴演示页Javascript代码，则它可以正常工作.

It works correctly on PhotoSwipe demo page, so it is an error in my code. If I copy/paste demo page Javascript code, it works correctly.

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

I believe I am missing some code that binds currently shown slide with respective thumbnail. My main issue with demo page is: I have a hard time understanding vanilla JS demo, what part is responsible for what action. Please help me find missing functionality.

这是我的PhotoSwipe单击以启动图库"事件的代码:

Here's my code for PhotoSwipe "click to start gallery" event:

$('.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张幻灯片):

My gallery (stripped down to 2 slides):

<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生成的:

Item array is generated from 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解析器进行解析:

JSON is hardcoded into a p element, is parsed using jQuery parser:

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

您可以找到整页在GitHub上有问题的

在Codepen上进行PhotoSwipe演示

您能帮我找到我想念的东西吗?

Can you help me find what I am missing?

修改:我已经在原始PhotoSwipe演示中将此问题归结为这部分代码:

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

如果我用固定的缩略图选择器替换了此部分(如我在jQuery中使用的那样-它包含事件目标"引用)，则可以强制PhotoSwipe演示重复我的行为-缩小将在同一图像上执行.与我的情况不完全相同，但足够接近.

If I replace this part with a fixed thumbnail selector (like I have in my jQuery - it contains "event target" reference), I can force PhotoSwipe demo to repeat my behavior - zoom out gets performed on same image. Not exactly the same thing that happens in my case, but close enough.

现在，我只需要弄清楚如何更改我的getThumbBoundsFn以使用实际的缩略图引用而不是event.target ......我可能必须更新我的itemArray以包括指向figure元素的链接，例如原始的PhotoSwipe演示.如我先前所写，我还是Java的新手，因此弄清楚某些事情需要花费时间.任何帮助将不胜感激.

Now I just need to figure out how to change my getThumbBoundsFn to use actual thumbnail reference instead of event.target... I'll probably have to update my itemArray to include links to figure element, like the original PhotoSwipe demo. As I wrote earlier, I'm still new to Javascript, so figuring out some things takes time. Any help will be appreciated.

推荐答案

自己弄清楚了.我真的使用event.target弄糟了.使用PhotoSwipe的正确方法要求我提供实际的DOM元素，而不是固定的DOM元素(如事件目标).

Figured it out myself. I really screwed things up by using event.target. The correct way of working with PhotoSwipe requires me to provide actual DOM element instead of a fixed one (like event target).

正确的方法就像演示:创建itemArray时保存DOM元素(选择器)使用itemArray中的DOM元素以提供正确的元素来计算边界矩形.

The correct way of doing this is just like demo:save DOM element (selector) when creating itemArrayuse DOM element from itemArray in order to provide correct element to calculate bounding rectangle.

正确的jQuery代码:

Correct jQuery code:

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对象计算其边界矩形).

added item.el property, which saves last added element when it is appended to the gallery (in my case - figure img, since I need the img object to calculate its bounding rectangle).

将event.target替换为相应的itemArray[index].el(先前保存的节点).

Replaced event.target with respective itemArray[index].el (previously saved node).

希望这会有所帮助！我花了几个小时，并通过PhotoSwipe演示页面进行了反复试验才能弄清楚这一点.

Hope this helps! It took me a couple of hours and some trial and error with PhotoSwipe demo page to figure this out.

这篇关于PhotoSwipe:关闭图库会为错误的矩形设置动画(缩略图)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！