相册展示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 相关文章推荐
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
Apr 15 Javascript
JavaScript中this关键词的使用技巧、工作原理以及注意事项
May 20 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
JS实现向表格中动态添加行的方法
Mar 30 Javascript
jQuery()方法的第二个参数详解
Apr 29 Javascript
Underscore.js 1.3.3 中文注释翻译说明
Jun 25 Javascript
javascript实现五星评分功能
Nov 10 Javascript
jQuery实现手机版页面翻页效果的简单实例
Oct 05 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Node.js安装配置图文教程
May 10 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
Oct 15 Javascript
jQuery子选择器与可见性选择器实例分析
Jun 28 jQuery
移动端点击图片放大特效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
phpMyAdmin 链接表的附加功能尚未激活问题的解决方法(已测)
2012/03/27 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP实现扎金花游戏之大小比赛的方法
2015/03/10 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
Javascript变量函数浅析
2011/09/02 Javascript
jQuery获取和设置表单元素的方法
2014/02/14 Javascript
nodejs中简单实现Javascript Promise机制的实例
2014/12/06 NodeJs
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
jQuery实现的网页换肤效果示例
2016/09/20 Javascript
vue自定义指令实现v-tap插件
2016/11/03 Javascript
VUE元素的隐藏和显示(v-show指令)
2017/06/23 Javascript
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
微信小程序实现点击按钮后修改颜色
2019/12/05 Javascript
Python列表推导式的使用方法
2013/11/21 Python
Python装饰器decorator用法实例
2014/11/10 Python
浅谈function(函数)中的动态参数
2017/04/30 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python3.5 创建文件的简单实例
2018/04/26 Python
Series和DataFrame使用简单入门
2019/11/13 Python
Python函数的返回值、匿名函数lambda、filter函数、map函数、reduce函数用法实例分析
2019/12/26 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python中使用aiohttp模拟服务器出现错误问题及解决方法
2020/10/31 Python
Html5如何唤起百度地图App的方法
2019/01/27 HTML / CSS
浅谈HTML5中dialog元素尝鲜
2018/10/15 HTML / CSS
Expedia马来西亚旅游网站:廉价酒店,度假村和航班预订
2016/07/26 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
护理专业本科生自荐信
2013/10/01 职场文书
办公室驾驶员岗位职责
2013/11/15 职场文书
青年教师培训方案
2014/02/06 职场文书
《罗布泊,消逝的仙湖》教学反思
2014/03/01 职场文书
拿破仑传读书笔记
2015/07/01 职场文书
基于Redis zSet实现滑动窗口对短信进行防刷限流的问题
2022/02/12 Redis
Java Spring Boot 正确读取配置文件中的属性的值
2022/04/20 Java/Android