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 相关文章推荐
IE iframe的onload方法分析小结
Jan 07 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
高效的获取当前元素是父元素的第几个子元素
Oct 15 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JQuery显示、隐藏div的几种方法简明总结
Apr 16 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
ES6中参数的默认值语法介绍
May 03 Javascript
mockjs,json-server一起搭建前端通用的数据模拟框架教程
Dec 18 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
微信小程序支付PHP代码
Aug 23 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中定时计划任务的实现原理
2013/01/08 PHP
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP获取ip对应地区和使用网络类型的方法
2015/03/11 PHP
php自定义urlencode,urldecode函数实例
2015/03/24 PHP
教你在PHPStorm中配置Xdebug
2015/07/27 PHP
php中让人头疼的浮点数运算分析
2016/10/10 PHP
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
node.js中的fs.read方法使用说明
2014/12/17 Javascript
Bootstrap每天必学之日期控制
2016/03/07 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
KnockoutJS 3.X API 第四章之表单submit、enable、disable绑定
2016/10/10 Javascript
js获取当前页的URL与window.location.href简单方法
2017/02/13 Javascript
vue2.0 better-scroll 实现移动端滑动的示例代码
2018/01/25 Javascript
再谈Angular4 脏值检测(性能优化)
2018/04/23 Javascript
vue基础之事件v-onclick=&quot;函数&quot;用法示例
2019/03/11 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
2019/09/18 Javascript
angular组件间通讯的实现方法示例
2020/05/07 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
Python3实现的腾讯微博自动发帖小工具
2013/11/11 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
python处理xml文件的方法小结
2017/05/02 Python
用Python写王者荣耀刷金币脚本
2017/12/21 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python下应用opencv 实现人脸检测功能
2019/10/24 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
英国名牌服装购物网站:OD’s Designer
2019/09/02 全球购物
爱祖国爱家乡演讲稿
2014/09/02 职场文书
庆祝教师节活动总结
2015/03/23 职场文书
走近毛泽东观后感
2015/06/04 职场文书
电工实训心得体会
2016/01/14 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python
MySQL插入数据与查询数据
2022/03/25 MySQL
Windows和Linux上部署Golang并运行程序
2022/04/22 Servers
centos环境下nginx高可用集群的搭建指南
2022/07/23 Servers