手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果


Posted in Javascript onAugust 25, 2016

先来几张效果图:

手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

点击其中一张照片可放大,可支持图片文字描述:

手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

同时支持分享功能:

手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

支持手势放大缩小

手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果

使用js框架是PhotoSwipe。 
PhotoSwipe是一个图片放大插件,兼容pc和移动端,经历过多个版本的迭代且一直在不断更新,踩过的坑不知凡几,在移动端有着巨大的优势。
1、可控制多种风格如:
标题、分享、全屏按钮,点击事件、是否加入字幕,背景透明等。
2、可支持移动端触摸手势兼容pc端
所有的基本手势支持:滑动下一个或上一个,拖动平移、缩放、放大或关闭,点击切换控件,双击放大或缩放。
3、分享
默认的UI有一个按钮,分享链接。默认的链接是facebook,推特和Pinterest,但你可以通过API设置分享类型。
4、用户界面
用户界面是完全从核心脚本分离。完全可以自定义界面。默认photoswipe UI是响应式的,桌面、平板电脑和移动设备完全可以使用。 
5、更多功能等你发现。 
官网:http://photoswipe.com/ 
github:https://github.com/dimsemenov/photoswipe

1、在官网下载PhotoSwipe,在页面中引入

<link rel="stylesheet prefetch" href="css/photoswipe.css">
<link rel="stylesheet prefetch" href="css/default-skin/default-skin.css">
<script src="js/photoswipe.js"></script>
<script src="js/photoswipe-ui-default.min.js"></script>

2、页面中必须加入以下代码结构(此结构是插件图片浏览必须代码,作者并没有集成到js中,所以使用者必须手动加入自己的网页中):

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

 <!-- Background of PhotoSwipe. 
 It's a separate element as animating opacity is faster than rgba(). -->
 <div class="pswp__bg"></div>

 <!-- Slides wrapper with overflow:hidden. -->
 <div class="pswp__scroll-wrap">

 <!-- Container that holds slides. 
 PhotoSwipe keeps only 3 of them in the DOM to save memory.
 Don't modify these 3 pswp__item elements, data is added later on. -->
 <div class="pswp__container">
 <div class="pswp__item"></div>
 <div class="pswp__item"></div>
 <div class="pswp__item"></div>
 </div>

 <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
 <div class="pswp__ui pswp__ui--hidden">

 <div class="pswp__top-bar">

 <!-- Controls are self-explanatory. Order can be changed. -->

 <div class="pswp__counter"></div>

 <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

 <button class="pswp__button pswp__button--share" title="Share"></button>

 <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

 <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

 <!-- element will get class pswp__preloader--active when preloader is running -->
 <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__share-modal pswp__share-modal--hidden pswp__single-tap">
 <div class="pswp__share-tooltip"></div> 
 </div>

 <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
 </button>

 <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
 </button>

 <div class="pswp__caption">
 <div class="pswp__caption__center"></div>
 </div>

 </div>

 </div>

</div>

3、需要浏览的图片加入photoswipe结构代码,这里需要注意的是
 data-pswp-uid在每个相册中必须是唯一的,data-size是指定放大时图片显示的宽和高,若指定的宽高与图片不符会导致显示的图片变形;目前还没找到去掉 data-size的办法,但然有时间可以找下替代办法。

<!--data-pswp-uid在每个相册中必须是唯一的,data-size指定放大时图片显示的宽和高-->
<div class="my-gallery" data-pswp-uid="1">
<figure>
  <a href="img/m3.jpg" data-size="670x712">
  <img src="img/th1.jpg">
  </a>
  </figure>
</div>

4、加入js代码,此代码作者也没有集成到photoswipe框架中,需要自己手动加入网页里

<script type="text/javascript">
 var initPhotoSwipeFromDOM = function(gallerySelector) {

 // 解析来自DOM元素幻灯片数据(URL,标题,大小...)
 // (children of gallerySelector)
 var parseThumbnailElements = function(el) {
 var thumbElements = el.childNodes,
 numNodes = thumbElements.length,
 items = [],
 figureEl,
 linkEl,
 size,
 item;

 for(var i = 0; i < numNodes; i++) {

 figureEl = thumbElements[i]; // <figure> element

 // 仅包括元素节点
 if(figureEl.nodeType !== 1) {
 continue;
 } 25 linkEl = figureEl.children[0]; // <a> element
 
 size = linkEl.getAttribute('data-size').split('x');

 // 创建幻灯片对象
 item = {
 src: linkEl.getAttribute('href'),
 w: parseInt(size[0], 10),
 h: parseInt(size[1], 10)
 };


 if(figureEl.children.length > 1) {
 // <figcaption> content
 item.title = figureEl.children[1].innerHTML; 
 }

 if(linkEl.children.length > 0) {
 // <img> 缩略图节点, 检索缩略图网址
 item.msrc = linkEl.children[0].getAttribute('src');
 }

 item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
 items.push(item);
 }

 return items;
 };

 // 查找最近的父节点
 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;

 // find root element of slide
 var clickedListItem = closest(eTarget, function(el) {
 return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
 });

 if(!clickedListItem) {
 return;
 }

 // find index of clicked item by looping through all child nodes
 // alternatively, you may define index via data- attribute
 var clickedGallery = clickedListItem.parentNode,
 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) {
 // open PhotoSwipe if valid index found
 openPhotoSwipe( index, clickedGallery );
 }
 return false;
 };

 // parse picture index and gallery index from URL (#&pid=1&gid=2)
 var photoswipeParseHash = function() {
 var hash = window.location.hash.substring(1),
 params = {};

 if(hash.length < 5) {
 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);

 // 这里可以定义参数
 options = {
 barsSize: { 
 top: 100,
 bottom: 100
 }, 
 fullscreenEl : false, // 是否支持全屏按钮
 shareButtons: [
 {id:'wechat', label:'分享微信', url:'#'},
 {id:'weibo', label:'新浪微博', url:'#'},
 {id:'download', label:'保存图片', url:'{{raw_image_url}}', download:true}
 ], // 分享按钮

 // define gallery index (for URL)
 galleryUID: galleryElement.getAttribute('data-pswp-uid'),

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

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

 };

 // PhotoSwipe opened from URL
 if(fromURL) {
 if(options.galleryPIDs) {
 // parse real index when custom PIDs are used 
 for(var j = 0; j < items.length; j++) {
  if(items[j].pid == index) {
  options.index = j;
  break;
  }
 }
 } else {
 // in URL indexes start from 1
 options.index = parseInt(index, 10) - 1;
 }
 } else {
 options.index = parseInt(index, 10);
 }

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

 if(disableAnimation) {
 options.showAnimationDuration = 0;
 }

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

 // loop through all gallery elements and bind events
 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 );
 }
 };

 // execute above function
 initPhotoSwipeFromDOM('.my-gallery');
</script>

本文已被整理到了《JavaScript微信开发技巧汇总》,欢迎大家学习阅读。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

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

Javascript 相关文章推荐
脚本吧 - 幻宇工作室用到js,超强推荐share.js
Dec 23 Javascript
javascript new 需不需要继续使用
Jul 02 Javascript
jquery ajax 同步异步的执行 return值不能取得的解决方案
Jan 08 Javascript
Javascript中3种实现继承的方法和代码实例
Aug 12 Javascript
推荐JavaScript实现继承的最佳方式
Nov 11 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
JS中将多个逗号替换为一个逗号的实现代码
Jun 23 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JavaScript内存泄漏的处理方式
Nov 20 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
一步快速解决微信小程序中textarea层级太高遮挡其他组件
Mar 04 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
jQuery组件easyui基本布局实现代码
Aug 25 #Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
Aug 25 #Javascript
Js得到radiobuttonlist选中值的两种方法(推荐)
Aug 25 #Javascript
总结JavaScript的正则与其他语言的不同之处
Aug 25 #Javascript
You might like
PHP 5.0对象模型深度探索之绑定
2006/09/05 PHP
用Php实现链结人气统计
2006/10/09 PHP
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
javascript+css 网页每次加载不同样式的实现方法
2009/12/27 Javascript
原生JS操作网页给p元素添加onclick事件及表格隔行变色
2013/12/01 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
ECMAScript中函数function类型
2015/06/03 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
微信小程序 action-sheet 反馈上拉菜单简单实例
2017/05/11 Javascript
vue时间格式化实例代码
2017/06/13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
2017/07/16 Javascript
Angular 4.0学习教程之架构详解
2017/09/12 Javascript
vue异步加载高德地图的实现
2018/06/19 Javascript
微信小程序 云开发模糊查询实现解析
2019/09/02 Javascript
[00:56]PWL开团时刻DAY8——追追追追追!
2020/11/09 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python中类型检查的详细介绍
2017/02/13 Python
对TensorFlow中的variables_to_restore函数详解
2018/07/30 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
深入浅析Python 中的sklearn模型选择
2019/10/12 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
Book Depository澳大利亚:世界领先的专业在线书店之一
2018/12/27 全球购物
出国留学经济担保书
2014/04/01 职场文书
党的群众路线批评与自我批评发言稿
2014/10/16 职场文书
春季运动会加油词
2015/07/18 职场文书
素质拓展训练感想
2015/08/07 职场文书
2016年元旦寄语
2015/08/17 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL