我正在使用 Masonry 和 PhotoSwipe 开发一个作品集网站。导航箭头不显示,图库无法通过手势导航。 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>
最佳答案
我知道这有点晚了,但我一直在寻找修复方法,但运气不佳,直到我最终弄明白了。不过,根据 official documentation 上的建议,我的 HTML 有点不同。 PhotoSwipe 的:
<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 对标记感到满意。
关于javascript - PhotoSwipe 和 Masonry 导航箭头丢失,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43739736/