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

我新的Javascript和我有实施PhotoSwipe插件问题：PhotoSwipe：关闭画廊动画错矩形（缩略图）

我试图实施使用jQuery网页PhotoSwipe插件。大部分工作正常（打开一个画廊，浏览幻灯片）。当我关闭画廊时，问题就会发生。问题：

我点击图片1，这会打开PhotoSwipe lightbox，我导航到幻灯片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张幻灯片）：从JSON产生

<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>

产品阵列：

[ 
    { 
     "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被硬编码为ap元素，使用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包括链接figure元素，像原来的PhotoSwipe演示。正如我之前写的，我还是Javascript的新手，所以搞清楚一些事情需要时间。任何帮助将不胜感激。

来源

2016-04-27 Yuri Predborski

自己想出来。我真的搞砸了使用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 = "<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演示页面进行了一些试验和错误，以弄清楚这一点。

来源

2016-04-27 23:56:14

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

回答

相关问题