网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

解决photoswipe插件 url 参数&gid=null

关注我吧
 2017/8/29 17:07:24 阅读次数:288

一、概述:

photoswipe.js 插件 点击图片展示时 &gid=null 怎么回事,为什么报这个null,展示还是可以用的,但是发现为null后没刷新是没办法自动展示的。在网上没找着这个问题,但是还是被发现了。

photoswipe.js是一款非常棒的图片预览插件,支持手机、PC端。非常好用,自定义非常好,但是需要一定的JS功底才能做出自己要实现的效果。

解决photoswipe插件 url 参数&gid=null

因为我要在使用swiper 焦点图切换的基础上使用图片预览特效,所以我的html代码如下:

<div id="demo-test-gallery" class="demo-gallery swiper-container">
  <div class="swiper-wrapper">
        <a href="javascript:;" data-size="1x1" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x683" data-type="厅A" class="swiper-slide demo-gallery__img--main"><img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" height="212" alt="" />
        </a>
        <a href="javascript:;" data-size="1x1" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x683" data-type="户型图" class="swiper-slide"><img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
        </a>
        <a href="javascript:;" data-size="1x1" data-med="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_b.jpg" data-med-size="1024x683" data-type="厅B" class="swiper-slide"> <img src="https://farm4.staticflickr.com/3902/14985871946_86abb8c56f_m.jpg" alt="" />
        </a>
        <a href="javascript:;" data-size="1x1" data-med="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_b.jpg" data-med-size="1024x683" data-type="卧室A" class="swiper-slide"> <img src="https://farm6.staticflickr.com/5584/14985868676_4b802b932a_m.jpg"  alt="" />
        </a>
        <a href="javascript:;" data-size="1x1" data-med="https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg" data-med-size="1024x683" data-type="厨房" class="swiper-slide"> <img src="https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg" alt="" />
        </a>
        <a href="javascript:;" data-size="1x1" data-med="https://farm4.staticflickr.com/3920/15008465772_383e697089_b.jpg?2" data-med-size="1024x683" data-type="厨房" class="swiper-slide"> <img src="https://farm4.staticflickr.com/3920/15008465772_383e697089_m.jpg?2" alt=""  />
        </a>
    </div>
  <div class="swiper-pagination"></div>
</div>

二、出现的原因:

initPhotoSwipeFromDOM(".demo-gallery");//此方法是根据官网的调用一样

但是html已经不一样了,所以导致了出现这种错误,多出了一层父级标签 <div class="swiper-wrapper"></div>。

initPhotoSwipeFromDOM(".demo-gallery .swiper-wrapper");//这样就解决了

当然需要根据实际情况而定,我这个是添加了一层级控制,你也可以直接用:

initPhotoSwipeFromDOM(".swiper-wrapper");

三、结语:

使用此插件需要注意的是,initPhotoSwipeFromDOM调用时一定要是图片展示区的第一个父级的class或ID,为准。


大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】
0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

阅读全文内容关闭