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：關閉畫廊動畫錯矩形（縮略圖）

回答

相關問題