网页前端设计

一、概述：

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

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

因为我要在使用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，为准。

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