PhotoSwipe and Masonryナビゲーション矢印がありません

Question

私は、MasonryとPhotoSwipeの両方を使ってポートフォリオのWebサイトに取り組んでいます。ナビゲーション矢印は表示されず、ギャラリーはジェスチャーでナビゲートできません。 PhotoSwipeをMasonryで使用できますか？

は、ここに私のコードのビットです：

<div class="main-container"> 
<div class="main clear fix"> 
<div id="content"> 
<!-- Portfolio Rendering --> 
<div class="grid">   
div class="grid-sizer"> 
<div class="grid-item"> 
<a href="portfolio/01.jpg" data-size="900x1200" data-med="portfolio/600/01.jpg" data-med-size="600x800" data-author=""> 
<img src="portfolio/600/01.jpg" alt="" /> 
</a> 
</div> 
<div class="grid-item"> 
<a href="portfolio/02.jpg" data-size="900x1200" data-med="portfolio/600/02.jpg" data-med-size="600x900" data-author=""><img src="portfolio/600/02.jpg" alt="" /> 
</a> 
</div> 
<div class="grid-item"><a href="portfolio/03.jpg" data-size="900x1200" data-med="portfolio/600/03.jpg" data-med-size="600x800" data-author="">   <img src="portfolio/600/03.jpg" alt="" /> 
</a> 
</div></div></div> 
</div></div></div> 

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
<div class="pswp__bg"></div> 
<div class="pswp__scroll-wrap"> 
<div class="pswp__container"> 
<div class="pswp__item"></div> 
<div class="pswp__item"></div> 
<div class="pswp__item"></div> 
</div> 
<div class="pswp__ui pswp__ui--hidden"> 
<div class="pswp__top-bar"> 
<button class="pswp__button pswp__button--close" title="Close (Esc)"></button>     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>           <div class="pswp__preloader"> 
<div class="pswp__preloader__icn"> 
<div class="pswp__preloader__cut"> 
<div class="pswp__preloader__donut"></div> 
</div></div></div></div> 
<!-- <div class="pswp__loading-indicator"> 
<div class="pswp__loading-indicator__line"> 
</div></div> --> 
<button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"></button> 
<button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"></button> 
</div></div></div> 

Answer 1

私はそれが少し遅れてだということを知っているが、結局、私はそれを考え出したまで、私は、運と修正を探していました。私のHTMLは、しかし、PhotoSwipeのofficial documentationの提案に基づいて、少し違っていた：私はdivで<figure>タグをラップする場合

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 
    <div class="grid-sizer"></div> 
    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 
      <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 
     </a> 
    </figure> 

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 
      <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 
     </a> 
    </figure> 
</div> 

、石工が働いていたが、PhotoSwipeナビゲーションはしませんでした。 divを削除した場合、PhotoSwipeのナビゲーションは正常ですが、レイアウトが乱れてしまいました。最終的に、.grid-sizer divを削除し、代わりにギャラリーの最初の要素に.grid-sizerクラスを追加しました。これにより問題が修正されました。だから、私の場合で働いてマークアップはそのような何か（最初<figure>要素に余分なクラスを気づか）であった：その方法

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> 
    <figure class="grid-sizer" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 
      <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 
     </a> 
    </figure> 

    <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> 
     <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> 
      <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> 
     </a> 
    </figure> 
</div> 

、石積み応答性のレイアウトを計算するために最初の項目を使用してPhotoSwipeは満足していましたマークアップ。