手机端 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 相关文章推荐
jQuery 使用个人心得
Feb 26 Javascript
bootstrap data与jquery .data
Jul 07 Javascript
jQuery中prevAll()方法用法实例
Jan 08 Javascript
jQuery使用之处理页面元素用法实例
Jan 19 Javascript
JavaScript代码生成PDF文件的方法
Feb 26 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
Node.js+Express+MySql实现用户登录注册功能
Jul 10 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
vue实现微信二次分享以及自定义分享的示例
Mar 20 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
手机图片预览插件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利用COM对象访问SQLServer、Access
2006/10/09 PHP
PHP+MySQL投票系统的设计和实现分享
2012/09/23 PHP
解析用PHP读写音频文件信息的详解(支持WMA和MP3)
2013/05/10 PHP
深入PHP中的HashTable结构详解
2013/06/13 PHP
php中fgetcsv()函数用法实例
2014/11/28 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
js类后台管理菜单类-MenuSwitch
2007/09/12 Javascript
基于jQuery的星级评分插件
2011/08/12 Javascript
图片延迟加载的实现代码(模仿懒惰)
2013/03/29 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
jquery实现鼠标悬浮停止轮播特效
2020/08/20 Javascript
js滚动条平滑移动示例代码
2016/03/29 Javascript
JavaScript笔记之数据属性和存储器属性
2016/03/31 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
jQuery Dialog 取消右上角删除按钮事件
2016/09/07 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
JavaScript定义全局对象的方法示例
2017/01/12 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
[01:19:34]2014 DOTA2国际邀请赛中国区预选赛 New Element VS Dream time
2014/05/22 DOTA
pycharm 使用心得(二)设置字体大小
2014/06/05 Python
Python使用scrapy抓取网站sitemap信息的方法
2015/04/08 Python
python基于右递归解决八皇后问题的方法
2015/05/25 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Selenium chrome配置代理Python版的方法
2018/11/29 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
pyqt5 实现工具栏文字图片同时显示
2019/06/13 Python
使用CSS3实现多列布局与多背景的技巧
2016/02/29 HTML / CSS
德国奢侈品网上商城:Mytheresa
2016/08/24 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
医学专业本科毕业生自我鉴定
2013/12/28 职场文书
学雷锋宣传标语
2014/06/25 职场文书
质量整改报告范文
2014/11/08 职场文书
2015年党员干部承诺书
2015/01/21 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书