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

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

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

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

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

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

这是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张幻灯片）：

Item数组是从JSON生成的：

 [ { "src": "https://stackoverflow.com/questions/36899680/photoswipe-closing-gallery-animates-wrong-rectangle-thumbnail/images/nature/DSC_7216.jpg", "msrc": "https://stackoverflow.com/questions/36899680/photoswipe-closing-gallery-animates-wrong-rectangle-thumbnail/images/nature/DSC_7216_t.jpg", "w":1200, "h":795 }, { "src": "https://stackoverflow.com/questions/36899680/photoswipe-closing-gallery-animates-wrong-rectangle-thumbnail/images/nature/DSC_7218.jpg", "msrc": "https://stackoverflow.com/questions/36899680/photoswipe-closing-gallery-animates-wrong-rectangle-thumbnail/images/nature/DSC_7218_t.jpg", "w":1200, "h":795 } ] 

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

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

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

Codepen上的PhotoSwipe演示

你能帮我找到我失踪的东西吗？

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

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

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

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

Answer 1

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

这样做的正确方法就像demo：在创建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 = "
\n" + "\n" + "\n" + "\n
"; // 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演示页面的一些试验和错误来解决这个问题。