[英]PhotoSwipe and Masonry Navigation Arrows Missing
I'm working on a portfolio website using both Masonry and PhotoSwipe. 我正在使用Masonry和PhotoSwipe的作品集网站。 The navigation arrows do not show and gallery is not navigable via gestures.
导航箭头不显示,并且画廊无法通过手势导航。 Can PhotoSwipe be used with Masonry?
PhotoSwipe可以与Masonry一起使用吗?
Here's a bit of my code: 这是我的一些代码:
<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>
I know that it's a bit late, but I was searching for a fix with no luck, until eventually I figured it out. 我知道已经有点晚了,但是我一直在寻找一个没有运气的解决方法,直到最终我弄清楚了。 My HTML, though, was a bit different, based on the suggestion on the official documentation of PhotoSwipe:
不过,基于PhotoSwipe 官方文档的建议,我的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>
When I wrapped the <figure>
tag in a div
, masonry was working, but PhotoSwipe navigation didn't. 当我将
<figure>
标签包裹在div
,砖石工作了,但是PhotoSwipe导航却没有。 If I removed the div
, PhotoSwipe navigation was OK but the layout got messed up. 如果我删除了
div
,则PhotoSwipe导航可以,但是布局混乱了。 Eventually, I removed the .grid-sizer div and, instead, added the class .grid-sizer on the first element of the gallery, which fixed the issue. 最终,我删除了.grid-sizer div,而是在图库的第一个元素上添加了.grid-sizer类,从而解决了该问题。 So, the working markup in my case was something like that (notice the extra class on the first
<figure>
element): 因此,在我的情况下,工作标记是这样的(请注意第一个
<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>
That way, Masonry used the first item to calculate the responsive layout and PhotoSwipe was happy with the markup. 这样,Masonry使用第一项来计算响应式布局,而PhotoSwipe对标记感到满意。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.