移动端如何打开图片浏览插件

1、首先引入 jQuery

<script src="./fly-zomm-img.min.js"></script>

2、再引入 图片浏览插件

<script src="./fly-zomm-img.min.js"></script>

3、无需额外引入css样式文件

4、<div id="content">

   

      <img src="./images/swiper-1.jpg" alt="">

   

   

      <img src="./images/swiper-2.jpg" alt="">

5、 

   
   
      <img src="./images/swiper-3.jpg" alt="">
   
   
      <img src="./images/swiper-4.jpg" alt="">
   
  </div>

6、配置插件参数：

<script>
  $('#content').FlyZommImg({
      rollSpeed: 200,//切换速度
      miscellaneous: false,//是否显示底部辅助按钮
      closeBtn: true,//是否打开右上角关闭按钮
      hideClass: 'hide',//不需要显示预览的 class
      imgQuality: 'thumb',//图片质量类型  thumb 缩略图  original 默认原图
      slitherCallback: function (direction, DOM) {//左滑动回调 两个参数 第一个动向 'left,firstClick,close' 第二个 当前操作DOM
        //console.log(direction,DOM);
      }
    });
</script>