相册展示PhotoSwipe.js插件实现


Posted in Javascript onAugust 25, 2016

PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子。 

这个组件主要是用来展示图片、相册用的,还是很实用的。 

一、使用这个组件需要引入两个js文件 
1 <script type="text/javascript" src="simple-inheritance.min.js">
2 <script type="text/javascript" src="code-photoswipe-1.0.11.min.js"> <!--当前最新版的应该是1.0.11 -->

二、然后页面结构可以是这样子的 

<div id="Gallery">
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></div>
    <div class="gallery-item"><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></div>
    <div class="gallery-item"><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></div>
  </div>
  <div class="gallery-row">
    <div class="gallery-item"><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></div>
    <div class="gallery-item"><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></div>
    <div class="gallery-item"><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></div>
  </div>
</div>

其实在这段html代码中除了页面结构外,真正有用的只有 id="Gallery"和<a href="图片路径"></a>(在后面会有说明),其他的class神马的只是起到美化最初的页面结构的作用(和你真正想要的效果的页面不同,也就是说,你只要按照上述页面的结构进行排版,你想要的页面效果是插件js自身完成的,是不需要你写效果布局的)。 

页面需要的js和页面结构都有了,下面就是使用插件了。 

三、你可以采用两种方式进行插件的声明 

1、是用浏览器默认的方式addEventListener()的方式进行 

document.addEventListener("DOMContentLoaded",function(){
  Code.photoSwipe('a','#Gallery');

//此处就涉及到上述页面结构中的 id="Gallery"和<a href="..."></a>,其中id="Gallery"是容器

//<a href="图片路径"></a>,此处href中一定是当前所指向的图片的路径
},false);

2、使用Jquery的方式: 

$(document).ready(function(){
  $("#Gallery a").photoSwipe();
});

四、通过这样的设置你的页面大概会是这样的 
一开始的页面效果:

 相册展示PhotoSwipe.js插件实现

点击任意一张图片后页面的形式变成如下(这个页面其实才是我真正想要的页面):

 相册展示PhotoSwipe.js插件实现

可以明显的看到页面上方<img />中的alt中的内容,下方会有四个按钮,依次代表:关闭页面回到最初显示的样子(就是上上图)、自动播放、上一页图片、下一页图片。 

这样一个相册的效果就出现了。当然在这个页面可以使用鼠标左右滑动进行切换,如果在手持设备上还可以通过手指的左右滑动进行。 

这个插件还有很多自己的属性: 

allowUserZoom: 允许用户双击放大/移动方式查看图片. 默认值 = true
autoStartSlideshow: 当PhotoSwipe激活后,自动播放幻灯片. 默认值 = false
allowRotationOnUserZoom: 只有 iOS 支持 - 允许用户在缩放/平移模式下 用手势旋转图像. 默认值 = false
backButtonHideEnabled: 按返回键隐藏相册幻灯片. 主要是 Android 和 Blackberry使用. 支持 BB6, Android v2.1, iOS 4 以及更新版本. 默认值 = true
captionAndToolbarAutoHideDelay: 标题栏和工具栏自动隐藏的延迟时间. 默认值为 = 5000(毫秒). 如果设为 0 则不会自动隐藏(tap/单击切换显隐)
captionAndToolbarFlipPosition: 标题栏和工具栏切换位置(让 caption显示在底部而 toolbar显示在顶部). 默认值 = false
captionAndToolbarHide: 隐藏 标题栏和工具栏. 默认值 = false
captionAndToolbarOpacity: 标题栏和工具栏 的透明度(0-1). 默认值 = 0.8
captionAndToolbarShowEmptyCaptions: 即使当前图片的标题是空,也显示标题栏. 默认值 = true
cacheMode: 缓存模式,Code.PhotoSwipe.Cache.Mode.normal (默认,正常) 或者 Code.PhotoSwipe.Cache.Mode.aggressive(激进,积极). 决定 PhotoSwipe 如何管理图片缓存 cache.
Aggressive 模式将会积极地地设置非 "当前,上一张,下一张"的图片为空的类型. 对于老版本iOS 浏览器下的大图片内存溢出将会很有用. 大多数情况下,normal模式就可以了。
doubleTapSpeed: 双击的最大间隔. 默认值 = 300(毫秒)
doubleTapZoomLevel: 当用户双击的时候,放大的倍数, 默认的 "zoom-in"(拉近) 级别. 默认值 = 2.5
enableDrag: 允许拖动上一张/下一张图片到当前界面. 默认值 = true
enableKeyboard: 允许键盘操作(左右箭头切换,Esc退出,Enter自动播放,空格键 显/隐标题栏/退出). 默认 = true
enableMouseWheel: 允许鼠标滚轮操作. 默认 = true
fadeInSpeed: 淡入效果元素的速度(持续时间),毫秒. 默认 = 250
fadeOutSpeed: 淡出效果元素的速度(持续时间),毫秒. 默认 = 250
imageScaleMethod: 图片缩放方法(模式). 可选值: "fit", "fitNoUpscale" 和 "zoom". 模式"fit" 保证图像适应屏幕. "fitNoUpscale" 和 "fit"类似但是不会放大图片. "zoom"将图片全屏, 但有可能图片缩放不是等比例的. 默认 = "fit"
invertMouseWheel: 反转鼠标滚轮。默认情况下,鼠标向下滚动将切换到下一张,向上切换到上一张 . 默认 = false
jQueryMobile: 指示 PhotoSwipe 是否集成进了 jQuery Mobile 项目. 默认情况下, PhotoSwipe will try and work this out for you
jQueryMobileDialogHash: jQuery Mobile的window,dialog页面 所使用的hash标签。 默认值 = "&ui-state=dialog"
loop: 相册是否自动循环. 默认 = true
margin: 两张图之间的间隔,单位是像素. 默认 = 20
maxUserZoom: 最大放大倍数. 默认 = 5.0 (设置为0将被忽略)
minUserZoom: 图像最小的缩小倍数. 默认 = 0.5 (设置为0将会忽略)
mouseWheelSpeed: 响应鼠标滚轮的灵敏度. 默认 = 500(毫秒)
nextPreviousSlideSpeed: 当点击上一张,下一张按钮后,延迟多少毫秒执行切换. 默认 = 0 (立即切换)
preventHide: 阻止用户关闭 PhotoSwipe. 同时也会隐藏 工具栏上的"close"关闭按钮. 在独享的页面使用 (示例是源码中的 examples/08-exclusive-mode.html). 默认 = false
preventSlideshow: 阻止自动播放模式. 同时也会隐藏工具栏里的播放按钮. 默认 = false
slideshowDelay: 自动播放模式下,多长时间播放下一张. Default = 3000(毫秒)
slideSpeed: 图片滑进视图的时间. 默认 = 250(毫秒)
swipeThreshold: 手指滑动多少像素才触发一个 swipe 手势事件. 默认 = 50
swipeTimeThreshold: 定义触发swipe(滑动)手势的最大毫秒数,太慢了则不会触发滑动,只会拖动当前照片的位置. 默认 = 250
slideTimingFunction: 滑动时的 Easing function . 默认 = "ease-out"
zIndex: 初始的zIndex值. 默认 = 1000
enableUIWebViewRepositionTimeout: 检查设备的方向是否改变。默认 = false
uiWebViewResetPositionDelay: 定时检查设备的方向是否改变的时间 默认 = 500(毫秒)
preventDefaultTouchEvents: 阻止默认的touch事件,比如页面滚动。 默认 = true
target: 必须是一个合法的DOM元素(如DIV)。默认是window(全页面)。而如果是某个低级别的DOM,则在DOM内显示,可能非全屏。

 如果不需要展示第一个页面直接展示第二个页面,可以这样设置: 

$(document).ready(function(){  
  // Set up PhotoSwipe, setting "preventHide: true"
  var thumbEls = Code.photoSwipe('a', '#Gallery', { preventHide: true });
  Code.PhotoSwipe.Current.show(0);
});

 当然这个插件还有很多其他的监听函数: 

document.addEventListener('DOMContentLoaded',function(){
  //onBeforeShow 在gallery将要展示之前调用该方法
 Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeShow,function(e){
  console.log("onBeforeShow");
});
  
// onshow 在gallery展示的时候调用
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShow,function(e){
  console.log("onShow");
});

// onBeforeHide 在gallery隐藏之前
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeHide, function(e){      
console.log('onBeforeHide');      
});
      
// onHide 在Gallery隐藏的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onHide, function(e){
  console.log('onHide');      
});
      
// onShowNext 在展示下一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowNext, function(e){
  console.log('onShowNext');
});
  
// onShowPrevious 在展示上一个的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onShowPrevious, function(e){
  console.log('onShowPrevious');
});
      
// onDisplayImage 在图片展示
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onDisplayImage, function(e){
  console.log('onDisplayImage');
});
      
// onResetPosition 当Gallery的大小和位置发生变化时或者设备的方向或者窗口大小改变时,出发该方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onResetPosition, function(e){
  console.log('onResetPosition');
});
      
// onSlideshowStart 当gallery开始滑动展示的时候(此方法可能是我理解有误,实验过程中一直没有触发过
的),原文是:When the gallery has started the slideshow
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStart, function(e){
  console.log('onSlideshowStart');
});
      
// onSlideshowStop 当Gallery活动结束的时候
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onSlideshowStop, function(e){
  console.log('onSlideshowStop');
});
      
// onBeforeCaptionAndToolbarShow 在顶部状态栏和底部的工具栏展示之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarShow, function(e){
  console.log('onBeforeCaptionAndToolbarShow');
});

// onBeforeCaptionAndToolbarHide 在顶部状态栏和底部的工具栏隐藏之前触发
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onBeforeCaptionAndToolbarHide, function(e){
  console.log('onBeforeCaptionAndToolbarHide');
});
      
// onViewportClick 在gallery中点击屏幕的时候触发,此时一般会触发onBeforeCaptionAndToolbarShow
或者onBeforeCaptionAndToolbarHide 方法
Code.PhotoSwipe.Current.addEventListener(Code.PhotoSwipe.EventTypes.onViewportClick, function(e){
  console.log('onViewportClick');
});
    
},false);

由于在photoSwipe官网中没有发现api接口的调用方式,且现在的js水平也不咋地,所以它的一些api接口基本上不是很了解,但是我在查看它的例子的时候发现有个变量会经常出现,Code.PhotoSwipe或者Code.PhotoSwipe.Current,所有我就在控制台中进行了一些实验,当我输入Code.PhotoSwipe的时候,出现了如下内容:

相册展示PhotoSwipe.js插件实现

 虽然不能完全看懂里面是什么,但是能看到其中有Current这个元素,接着在控制台输入Code.PhotoSwipe.Current,得到下面的内容:

相册展示PhotoSwipe.js插件实现

在这里面可以发现更多的信息,比如:currentIndex表明当前所处的图片是在列表中的索引位置,整个连接起来就是 Code.PhotoSwipe.Current.currentIndex 代表当前图片所处的索引位置,这个信息对我来说很重要,我们可以通过这个信息在不同的页面中展示不同的页面信息。

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

Javascript 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
深入了解Node.js中的一些特性
Sep 25 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
javascript实现在线客服效果
Jul 15 Javascript
jquery+php实现滚动的数字特效
Nov 29 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
基于Vuejs的搜索匹配功能实现方法
Mar 03 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
JS实现骰子3D旋转效果
Oct 24 Javascript
node.js Promise对象的使用方法实例分析
Dec 26 Javascript
vue-cli3单页构建大型项目方案
Apr 07 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
Aug 25 #Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 #Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 #Javascript
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
Aug 25 #Javascript
jQuery组件easyui对话框实现代码
Aug 25 #Javascript
jQuery组件easyui基本布局实现代码
Aug 25 #Javascript
You might like
php不用正则采集速度探究总结
2008/03/24 PHP
PHP5各个版本的新功能和新特性总结
2014/03/16 PHP
destoon实现底部添加你是第几位访问者的方法
2014/07/15 PHP
php使用NumberFormatter格式化货币的方法
2015/03/21 PHP
PHP6新特性分析
2016/03/03 PHP
laravel邮件发送的实现代码示例
2020/01/31 PHP
JavaScript 事件记录使用说明
2009/10/20 Javascript
js 纯数字不重复排列的另类方法
2010/07/17 Javascript
解析javascript系统错误:-1072896658的解决办法
2013/07/08 Javascript
node.js中的fs.fstat方法使用说明
2014/12/15 Javascript
扒一扒JavaScript 预解释
2015/01/28 Javascript
JS实现左右无缝轮播图代码
2016/05/01 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
2016/08/02 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
微信小程序之拖拽排序(代码分享)
2017/01/21 Javascript
vuejs2.0子组件改变父组件的数据实例
2017/05/10 Javascript
NodeJS实现图片上传代码(Express)
2017/06/30 NodeJs
详解express + mock让前后台并行开发
2018/06/06 Javascript
vue.js 2.0实现简单分页效果
2019/07/29 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
JS localStorage存储对象,sessionStorage存储数组对象操作示例
2020/02/15 Javascript
基于python yield机制的异步操作同步化编程模型
2016/03/18 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python中对_init_的理解及实例解析
2019/10/11 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5 video 事件应用示例
2014/09/11 HTML / CSS
德国高尔夫商店:Par71.de
2020/11/29 全球购物
七年级生物教学反思
2014/01/30 职场文书
酒店值班经理的工作职责范本
2014/02/18 职场文书
领导班子整改措施
2014/10/24 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2015年元宵节活动总结
2015/02/06 职场文书
大国崛起日本观后感
2015/06/02 职场文书
工作表现证明
2015/06/15 职场文书