手机端点击图片放大特效PhotoSwipe.js插件实现


Posted in Javascript onAugust 24, 2016

PhotoSwipe插件能实现手机端点击图片全屏放大 再双击图片放大等功能

PhotoSwipe插件官方网站 http://www.photoswipe.com/

但有一点不太好的是图片放大后再单击不能关闭浏览,要点击关闭按钮或者滑动才能关闭,找了好久配置项都没说到这点上的,只能自己动手改了。

打开photoswipe.js,大概在3179行有个关于tap的函数定义
在开头先定义一个变量

var tap_num = 0;

然后在onTapStart的定义里加入

//根据需求自己添加的S
//判断是单击还是双击 单击关闭 双击放大
tap_num++;
if(tap_num < 2){
 setTimeout(function(){
  if(tap_num > 1){
   tap_num = 0;
   return;
  }else{
   tap_num = 0;
   //判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭
   if(_isDragging){
    return;
   }else{
    self.close();
   }
  }
 },200);
}
//根据需求自己添加的E

大概整体就是这样

var tapTimer,
 tapReleasePoint = {},
 _dispatchTapEvent = function(origEvent, releasePoint, pointerType) {  
  var e = document.createEvent( 'CustomEvent' ),
   eDetail = {
    origEvent:origEvent, 
    target:origEvent.target, 
    releasePoint: releasePoint, 
    pointerType:pointerType || 'touch'
   };

  e.initCustomEvent( 'pswpTap', true, true, eDetail );
  origEvent.target.dispatchEvent(e);
 };
var tap_num = 0;

_registerModule('Tap', {
 publicMethods: {
  initTap: function() {
   _listen('firstTouchStart', self.onTapStart);
   _listen('touchRelease', self.onTapRelease);
   _listen('destroy', function() {
    tapReleasePoint = {};
    tapTimer = null;
   });
  },
  onTapStart: function(touchList) {
   if(touchList.length > 1) {
    clearTimeout(tapTimer);
    tapTimer = null;
   }

   //根据需求自己添加的S
   //判断是单击还是双击 单击关闭 双击放大
   tap_num++;
   if(tap_num < 2){
    setTimeout(function(){
     if(tap_num > 1){
      tap_num = 0;
      return;
     }else{
      tap_num = 0;
      //判断是否有拖拽 如有拖拽触发拖拽事件 没有则关闭
      if(_isDragging){
       return;
      }else{
       self.close();
      }
     }
    },200);
   }
   //根据需求自己添加的E
  },
  onTapRelease: function(e, releasePoint) {
   if(!releasePoint) {
    return;
   }

   if(!_moved && !_isMultitouch && !_numAnimations) {
    var p0 = releasePoint;
    if(tapTimer) {
     clearTimeout(tapTimer);
     tapTimer = null;

     // Check if taped on the same place
     if ( _isNearbyPoints(p0, tapReleasePoint) ) {
      _shout('doubleTap', p0);
      return;
     }
    }

    if(releasePoint.type === 'mouse') {
     _dispatchTapEvent(e, releasePoint, 'mouse');
     return;
    }

    var clickedTagName = e.target.tagName.toUpperCase();
    // avoid double tap delay on buttons and elements that have class pswp__single-tap
    if(clickedTagName === 'BUTTON' || framework.hasClass(e.target, 'pswp__single-tap') ) {
     _dispatchTapEvent(e, releasePoint);
     return;
    }

    _equalizePoints(tapReleasePoint, p0);

    tapTimer = setTimeout(function() {
     _dispatchTapEvent(e, releasePoint);
     tapTimer = null;
    }, 300);
   }
  }
 }
});

把修改后的photoswipe.js压缩一下,就能实现自己想要的功能了

另外,使用photoswipe插件需要插入框架和JavaScript代码,可以把这些代码整合成一个js再引入,这样页面看起来就简洁了很多。
先在html写上图片相册结构,并配上样式

<div id="demo-test-gallery" class="demo-gallery">
 <a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024">
  <img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" />
 </a>

 <a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024">
  <img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" />
 </a>
</div>

整理后的js

document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->");
document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">");
document.writeln("");
document.writeln(" <!-- Background of PhotoSwipe.");
document.writeln("   It\'s a separate element as animating opacity is faster than rgba(). -->");
document.writeln(" <div class=\"pswp__bg\"><\/div>");
document.writeln("");
document.writeln(" <!-- Slides wrapper with overflow:hidden. -->");
document.writeln(" <div class=\"pswp__scroll-wrap\">");
document.writeln("");
document.writeln("  <!-- Container that holds slides.");
document.writeln("   PhotoSwipe keeps only 3 of them in the DOM to save memory.");
document.writeln("   Don\'t modify these 3 pswp__item elements, data is added later on. -->");
document.writeln("  <div class=\"pswp__container\">");
document.writeln("   <div class=\"pswp__item\"><\/div>");
document.writeln("   <div class=\"pswp__item\"><\/div>");
document.writeln("   <div class=\"pswp__item\"><\/div>");
document.writeln("  <\/div>");
document.writeln("");
document.writeln("  <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->");
document.writeln("  <div class=\"pswp__ui pswp__ui--hidden\">");
document.writeln("");
document.writeln("   <div class=\"pswp__top-bar\">");
document.writeln("");
document.writeln("    <!-- Controls are self-explanatory. Order can be changed. -->");
document.writeln("");
document.writeln("    <div class=\"pswp__counter\"><\/div>");
document.writeln("");
document.writeln("    <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>");
document.writeln("");
document.writeln("    <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>");
document.writeln("");
document.writeln("    <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>");
document.writeln("");
document.writeln("    <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>");
document.writeln("");
document.writeln("    <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->");
document.writeln("    <!-- element will get class pswp__preloader--active when preloader is running -->");
document.writeln("    <div class=\"pswp__preloader\">");
document.writeln("     <div class=\"pswp__preloader__icn\">");
document.writeln("      <div class=\"pswp__preloader__cut\">");
document.writeln("       <div class=\"pswp__preloader__donut\"><\/div>");
document.writeln("      <\/div>");
document.writeln("     <\/div>");
document.writeln("    <\/div>");
document.writeln("   <\/div>");
document.writeln("");
document.writeln("   <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">");
document.writeln("    <div class=\"pswp__share-tooltip\"><\/div>");
document.writeln("   <\/div>");
document.writeln("");
document.writeln("   <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">");
document.writeln("   <\/button>");
document.writeln("");
document.writeln("   <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">");
document.writeln("   <\/button>");
document.writeln("");
document.writeln("   <div class=\"pswp__caption\">");
document.writeln("    <div class=\"pswp__caption__center\"><\/div>");
document.writeln("   <\/div>");
document.writeln("");
document.writeln("  <\/div>");
document.writeln("");
document.writeln(" <\/div>");
document.writeln("");
document.writeln("<\/div>");


(function() {

  var initPhotoSwipeFromDOM = function(gallerySelector) {

   var parseThumbnailElements = function(el) {
    var thumbElements = el.childNodes,
      numNodes = thumbElements.length,
      items = [],
      el,
      childElements,
      thumbnailEl,
      size,
      item;

    for(var i = 0; i < numNodes; i++) {
     el = thumbElements[i];

     // include only element nodes
     if(el.nodeType !== 1) {
      continue;
     }

     childElements = el.children;

     size = el.getAttribute('data-size').split('x');

     // create slide object
     item = {
      src: el.getAttribute('href'),
      w: parseInt(size[0], 10),
      h: parseInt(size[1], 10),
      author: el.getAttribute('data-author')
     };

     item.el = el; // save link to element for getThumbBoundsFn

     if(childElements.length > 0) {
      item.msrc = childElements[0].getAttribute('src'); // thumbnail url
      if(childElements.length > 1) {
       item.title = childElements[1].innerHTML; // caption (contents of figure)
      }
     }


     var mediumSrc = el.getAttribute('data-med');
     if(mediumSrc) {
      size = el.getAttribute('data-med-size').split('x');
      // "medium-sized" image
      item.m = {
       src: mediumSrc,
       w: parseInt(size[0], 10),
       h: parseInt(size[1], 10)
      };
     }
     // original image
     item.o = {
      src: item.src,
      w: item.w,
      h: item.h
     };

     items.push(item);
    }

    return items;
   };

   // find nearest parent element
   var closest = function closest(el, fn) {
    return el && ( fn(el) ? el : closest(el.parentNode, fn) );
   };

   var onThumbnailsClick = function(e) {
    e = e || window.event;
    e.preventDefault ? e.preventDefault() : e.returnValue = false;

    var eTarget = e.target || e.srcElement;

    var clickedListItem = closest(eTarget, function(el) {
     return el.tagName === 'A';
    });

    if(!clickedListItem) {
     return;
    }

    var clickedGallery = clickedListItem.parentNode;

    var childNodes = clickedListItem.parentNode.childNodes,
      numChildNodes = childNodes.length,
      nodeIndex = 0,
      index;

    for (var i = 0; i < numChildNodes; i++) {
     if(childNodes[i].nodeType !== 1) {
      continue;
     }

     if(childNodes[i] === clickedListItem) {
      index = nodeIndex;
      break;
     }
     nodeIndex++;
    }

    if(index >= 0) {
     openPhotoSwipe( index, clickedGallery );
    }
    return false;
   };

   var photoswipeParseHash = function() {
    var hash = window.location.hash.substring(1),
      params = {};

    if(hash.length < 5) { // pid=1
     return params;
    }

    var vars = hash.split('&');
    for (var i = 0; i < vars.length; i++) {
     if(!vars[i]) {
      continue;
     }
     var pair = vars[i].split('=');
     if(pair.length < 2) {
      continue;
     }
     params[pair[0]] = pair[1];
    }

    if(params.gid) {
     params.gid = parseInt(params.gid, 10);
    }

    return params;
   };

   var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {
    var pswpElement = document.querySelectorAll('.pswp')[0],
      gallery,
      options,
      items;

    items = parseThumbnailElements(galleryElement);

    // define options (if needed)
    options = {

     galleryUID: galleryElement.getAttribute('data-pswp-uid'),

     getThumbBoundsFn: function(index) {
      // See Options->getThumbBoundsFn section of docs for more info
      var thumbnail = items[index].el.children[0],
        pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
        rect = thumbnail.getBoundingClientRect();

      return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};
     },

     addCaptionHTMLFn: function(item, captionEl, isFake) {
      if(!item.title) {
       captionEl.children[0].innerText = '';
       return false;
      }
      captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';
      return true;
     }

    };

    // options for control bar
    options.shareEl = false;
    options.fullscreenEl = false;

    if(fromURL) {
     if(options.galleryPIDs) {
      // parse real index when custom PIDs are used
      // http://photoswipe.com/documentation/faq.html#custom-pid-in-url
      for(var j = 0; j < items.length; j++) {
       if(items[j].pid == index) {
        options.index = j;
        break;
       }
      }
     } else {
      options.index = parseInt(index, 10) - 1;
     }
    } else {
     options.index = parseInt(index, 10);
    }

    // exit if index not found
    if( isNaN(options.index) ) {
     return;
    }



    // Pass data to PhotoSwipe and initialize it
    gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);

    // see: http://photoswipe.com/documentation/responsive-images.html
    var realViewportWidth,
      useLargeImages = false,
      firstResize = true,
      imageSrcWillChange;

    gallery.listen('beforeResize', function() {

     var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;
     dpiRatio = Math.min(dpiRatio, 2.5);
     realViewportWidth = gallery.viewportSize.x * dpiRatio;


     if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {
      if(!useLargeImages) {
       useLargeImages = true;
       imageSrcWillChange = true;
      }

     } else {
      if(useLargeImages) {
       useLargeImages = false;
       imageSrcWillChange = true;
      }
     }

     if(imageSrcWillChange && !firstResize) {
      gallery.invalidateCurrItems();
     }

     if(firstResize) {
      firstResize = false;
     }

     imageSrcWillChange = false;

    });

    gallery.listen('gettingData', function(index, item) {
     if( useLargeImages ) {
      item.src = item.o.src;
      item.w = item.o.w;
      item.h = item.o.h;
     } else {
      item.src = item.m.src;
      item.w = item.m.w;
      item.h = item.m.h;
     }
    });

    gallery.init();
   };

   // select all gallery elements
   var galleryElements = document.querySelectorAll( gallerySelector );
   for(var i = 0, l = galleryElements.length; i < l; i++) {
    galleryElements[i].setAttribute('data-pswp-uid', i+1);
    galleryElements[i].onclick = onThumbnailsClick;
   }

   // Parse URL and open gallery if it contains #&pid=3&gid=1
   var hashData = photoswipeParseHash();
   if(hashData.pid && hashData.gid) {
    openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );
   }
  };

  initPhotoSwipeFromDOM('.demo-gallery');

 })();

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
向fckeditor编辑器插入指定代码的方法
May 25 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
Jan 11 Javascript
JavaScript获取function所有参数名的方法
Oct 30 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 Javascript
JS基于正则表达式实现的密码强度验证功能示例
Sep 21 Javascript
Bootstrap 3多级下拉菜单实例
Nov 23 Javascript
详解从Vue-router到html5的pushState
Jul 21 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
tsconfig.json配置详解
May 17 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
jQuery实现评论模块
Aug 19 jQuery
jQuery Raty 一款不错的星级评分插件
Aug 24 #Javascript
jQuery实现自动输入email、时间和域名的方法
Aug 24 #Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 #Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 #Javascript
深入浅析JavaScript中的3DES
Aug 24 #Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 #Javascript
JavaScript lodash常见用法系列小结
Aug 24 #Javascript
You might like
php 随机排序广告的实现代码
2011/05/09 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
php里array_work用法实例分析
2015/07/13 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
Mootools 1.2教程(21)——类(二)
2009/09/15 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
JavaScript实现Java中Map容器的方法
2016/10/09 Javascript
Angular2 父子组件通信方式的示例
2018/01/29 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
vue data恢复初始化数据的实现方法
2019/10/31 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
[01:15:15]VG VS EG Supermajor小组赛B组胜者组第一轮 BO3第二场 6.2
2018/06/03 DOTA
Python日志模块logging简介
2015/04/13 Python
Python操作RabbitMQ服务器实现消息队列的路由功能
2016/06/29 Python
使用python遍历指定城市的一周气温
2017/03/31 Python
详解python 拆包可迭代数据如tuple, list
2017/12/29 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python实现图片九宫格分割
2021/03/07 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
python 使用while循环输出*组成的菱形实例
2020/04/12 Python
用Python 爬取猫眼电影数据分析《无名之辈》
2020/07/24 Python
利用canvas实现图片下载功能来实现浏览器兼容问题
2019/05/31 HTML / CSS
门卫班长岗位职责
2013/12/15 职场文书
创业计划书六个要素
2013/12/26 职场文书
小学家长会邀请函
2014/01/23 职场文书
团结就是力量演讲稿
2014/05/21 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
工商管理专业毕业生自我鉴定2014
2014/10/04 职场文书
趣味运动会加油词
2015/07/18 职场文书
使用Pytorch实现two-head(多输出)模型的操作
2021/05/28 Python
Python预测分词的实现
2021/06/18 Python
js作用域及作用域链工作引擎
2022/07/07 Javascript