PhotoSwipe：クローズギャラリーは、私はJavaScriptに新たなんだと私はPhotoSwipeプラグインを実装する問題を抱えている間違った長方形（サムネイル）

Question

をアニメーション化：

私はjQueryのを使用してWebページのPhotoSwipeプラグインを実装しようとしています。そのほとんどは正しく動作しています（ギャラリーを開き、スライドをナビゲートします）。この問題は、ギャラリーを閉じると発生します。問題：

画像1をクリックするとPhotoSwipeライトボックスが開き、スライド2に移動してギャラリーを閉じます。これでギャラリーが閉じます。しかし、アニメーションを閉じてイメージ1のために再生され、イメージ2のために再生されることを期待しています。

これは、PhotoSwipeデモページで正しく動作するので、私のコードではエラーです。デモページのJavascriptコードをコピー/ペーストすると正しく動作します。

現在表示されているスライドとそれぞれのサムネイルをバインドするコードがありません。デモページの主な問題は次のとおりです。バニラの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は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の実際のサムネイルの参照を使用するように変更する方法を把握する必要があります...私はおそらく、元PhotoSwipeのデモのようなfigure要素へのリンクを含むように私のitemArrayを更新する必要があります。私が前に書いたように、私はまだ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のデモページでは数時間と試行錯誤がありました。