Question

我正在使用Masonry和PhotoSwipe在投资组合网站上工作。导航箭头不显示，并且图库无法通过手势导航。 PhotoSwipe可以和砌体一起使用吗？

这是我的一些代码：

<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

我知道它有点晚了，但我一直在寻找一个没有运气的修复，直到最终我弄明白了。根据PhotoSwipe official documentation的建议，我的HTML有点不同：

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

当我将<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>

这样，Masonry使用第一项计算响应式布局，PhotoSwipe对标记感到满意。

PhotoSwipe和Masonry导航箭头丢失

1 个答案: