javascript实现支持移动设备画廊


Posted in Javascript onAugust 24, 2015

这是一款不依赖任何js框架、纯javascript实现的画廊效果。它支持移动设备手势操作,如手势触摸滑动、放大和关闭图片,它还支持PC上的键盘操作,总之它是WEB开发者不可或缺的图片画廊插件,它叫photoswipe。

展示效果图如下:

javascript实现支持移动设备画廊

查看演示 下载源码

HTML

首先加载所需的CSS和js文件。

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

以上文件大家不要担心,月光光都打包好了,您只管下载拿去用就是。

接下来,准备body里的HTML部分。我们在页面里准备图片缩略图,当点击这张缩略图时,会弹出对应的大图集,我们准备

HTML结构如下:

<div id="photos"> 
 <img src="images/s1_m.jpg" alt="Image description" /> 
 <p>图集</p> 
</div>

现在,重要的画廊展示部分将为大图展示提供架构,注意以下代码中的元素:.pswp__bg, .pswp__scroll-wrap, .pswp__container 和 .pswp__item这几个Div不可更改。

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true"> 
 <div class="pswp__bg"></div> 
 <div class="pswp__scroll-wrap"> 
  <div class="pswp__container"> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
   <div class="pswp__item"></div> 
  </div> 
  <div class="pswp__ui pswp__ui--hidden"> 
   <div class="pswp__top-bar"> 
    <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> 
    <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>

以上HTML结构定义了画廊展示的内容、工具、方向按钮、标题说明等元素。

Javascript

我们在js里定义图集图片集合(当然也可以像demo2一样在html部分定义图片集),设置各种选项,然后通过使用new PhotoSwipe()来调用photoSwipe插件。

var openPhotoSwipe = function() { 
 var pswpElement = document.querySelectorAll('.pswp')[0]; 
 //定义图片集合 
 var items = [ 
  { 
   src: 'images/s1.jpg', 
   w: 800, 
   h: 1142 
  }, 
  { 
   src: 'images/s2.jpg', 
   w: 800, 
   h: 1142 
  } 
 ]; 
 var options = { 
  history: false, 
  focus: false, 
  showAnimationDuration: 0, 
  hideAnimationDuration: 0 
 }; 
 var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); 
 gallery.init(); 
}; 


//点击图集元素时触发调用openPhotoSwipe 

document.getElementById('photos').onclick = openPhotoSwipe;

大家可以将该款插件应用到移动项目中去,更多选项设置请参考PhotoSwipe项目地址:<https://github.com/dimsemenov/photoswipe。

以上内容就是javascript实现支持移动设备画廊的全部内容,希望大家喜欢。

Javascript 相关文章推荐
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
动态加载dtree.js树treeview(示例代码)
Dec 17 Javascript
css3元素简单的闪烁效果实现(html5 jquery)
Dec 28 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery实现滚动切换的tab选项卡效果代码
Aug 26 Javascript
jQuery 选择同时包含两个class的元素的实现方法
Jun 01 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
原生JS+Canvas实现五子棋游戏实例
Jun 19 Javascript
浅谈vuex 闲置状态重置方案
Jan 04 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
vue中监听返回键问题
Aug 28 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 Javascript
js实现带圆角的两级导航菜单效果代码
Aug 24 #Javascript
jQuery实现的手机发送验证码倒计时效果代码分享
Aug 24 #Javascript
js实现适用于素材网站的黑色多级菜单导航条效果
Aug 24 #Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 #Javascript
纯css实现窗户玻璃雨滴逼真效果
Aug 23 #Javascript
简单纯js实现点击切换TAB标签实例
Aug 23 #Javascript
基于jquery实现导航菜单高亮显示(两种方法)
Aug 23 #Javascript
You might like
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
PHP连接access数据库
2015/03/27 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP安装memcache扩展的步骤讲解
2019/02/14 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
js宝典学习笔记(上)
2007/01/10 Javascript
jQuery获取地址栏参数插件(模仿C#)
2010/10/26 Javascript
JQuery教学之性能优化
2014/05/14 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
2015/02/26 Javascript
JavaScript编程学习技巧汇总
2016/02/21 Javascript
BootStrap中
2016/12/10 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
2017/05/08 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
vscode下的vue文件格式化问题
2018/11/28 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
2019/09/27 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
在Python中执行系统命令的方法示例详解
2017/09/14 Python
Selenium使用Chrome模拟手机浏览器方法解析
2020/04/10 Python
如何查看Django ORM执行的SQL语句的实现
2020/04/20 Python
vscode写python时的代码错误提醒和自动格式化的方法
2020/05/07 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
css3加js做一个简单的3D行星运转效果实例代码
2017/01/18 HTML / CSS
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
会计专业自荐信范文
2013/12/02 职场文书
大众服装店创业计划书范文
2014/01/01 职场文书
六月份红领巾广播稿
2014/02/03 职场文书
yy婚礼主持词
2014/03/14 职场文书
岗位竞聘演讲稿范文
2014/04/24 职场文书
学习心理学的体会
2014/11/07 职场文书
教师工作总结范文2014
2014/11/10 职场文书
2015年小学生国庆节演讲稿
2015/07/30 职场文书
利用js实现简单开关灯代码
2021/11/23 Javascript
Golang 结构体数据集合
2022/04/22 Golang