手机端 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 的一个progressbar widge
Oct 29 Javascript
Json和Jsonp理论实例代码详解
Nov 15 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
基于javascript实现全屏漂浮广告
Mar 31 Javascript
JS实现把鼠标放到链接上出现滚动文字的方法
Apr 06 Javascript
jQuery 获取页面li数组并删除不在数组中的key
Aug 02 Javascript
浅析$(function) ready和onload 的区别
Sep 03 Javascript
详解Node.js项目APM监控之New Relic
May 12 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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实现用于计算执行时间的类实例
2015/04/18 PHP
php中yar框架实例用法讲解
2020/12/27 PHP
JavaScript URL参数读取改进版
2009/01/16 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
node.js使用require()函数加载模块
2014/11/26 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
利用jQuery实现CheckBox全选/全不选/反选的简单代码
2016/05/31 Javascript
原生js仿jquery animate动画效果
2016/07/13 Javascript
Javascript 事件冒泡机制详细介绍
2016/10/10 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
Bootstrap模态框(Modal)实现过渡效果
2017/03/17 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
vue-cli 目录结构详细讲解总结
2019/01/15 Javascript
JavaScript Reflect Metadata实现详解
2019/12/12 Javascript
Vue 使用typescript如何优雅的调用swagger API
2020/09/01 Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
2020/09/09 Javascript
Python中设置变量作为默认值时容易遇到的错误
2015/04/03 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
Flask框架请求钩子与request请求对象用法实例分析
2019/11/07 Python
python标准库OS模块函数列表与实例全解
2020/03/10 Python
购买大码女装:Lane Bryant
2016/09/07 全球购物
美国高级音响品牌:Master&Dynamic
2018/07/05 全球购物
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
技术经理的自我评价范文
2013/12/03 职场文书
税务干部群众路线教育实践活动对照检查材料
2014/09/20 职场文书
详解Java实践之适配器模式
2021/06/18 Java/Android
Spring Data JPA框架的核心概念和Repository接口
2022/04/28 Java/Android
TypeScript 内置高级类型编程示例
2022/09/23 Javascript