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 相关文章推荐
jQuery 通过事件委派一次绑定多种事件,以减少事件冗余
Jun 30 Javascript
Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
理解Javascript_12_执行模型浅析
Oct 18 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
Apr 17 Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 Javascript
Javascript中的方法和匿名方法实例详解
Jun 13 Javascript
微信小程序 HTTPS报错整理常见问题及解决方案
Dec 14 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
Feb 09 Javascript
浅谈Vue组件及组件的注册方法
Aug 24 Javascript
es6 filter() 数组过滤方法总结
Apr 03 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 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实现小型站点广告管理
2006/10/09 PHP
Ajax PHP 边学边练 之三 数据库
2009/11/26 PHP
ubuntu10.04配置 nginx+php-fpm模式的详解
2013/06/03 PHP
通过curl模拟post和get方式提交的表单类
2014/04/23 PHP
php通过sort()函数给数组排序的方法
2015/03/18 PHP
php session 写入数据库
2016/02/13 PHP
javascript for循环设法提高性能
2010/02/24 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
2010/03/01 Javascript
javascript实现的在当前窗口中漂浮框的代码
2010/03/15 Javascript
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
jQuery实现简单的点赞效果
2020/05/29 Javascript
node.js express安装及示例网站搭建方法(分享)
2016/08/22 Javascript
详解AngularJS 路由 resolve用法
2017/04/24 Javascript
jquery点赞功能实现代码 点个赞吧!
2020/05/29 jQuery
通俗解释JavaScript正则表达式快速记忆
2017/08/23 Javascript
使用vue-aplayer插件时出现的问题的解决
2018/03/02 Javascript
vue 本地环境跨域请求proxyTable的方法
2018/09/19 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
详解elementui之el-image-viewer(图片查看器)
2019/08/30 Javascript
JS实现数据动态渲染的竖向步骤条
2020/06/24 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
python 循环遍历字典元素的简单方法
2016/09/11 Python
Python 出现错误TypeError: ‘NoneType’ object is not iterable解决办法
2017/01/12 Python
python3+PyQt5实现支持多线程的页面索引器应用程序
2018/04/20 Python
Python中循环引用(import)失败的解决方法
2018/04/22 Python
获取python的list中含有重复值的index方法
2018/06/27 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
差生评语大全
2014/05/04 职场文书
语文教育专业求职信
2014/06/28 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
群众路线表态发言材料
2014/10/17 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
小班教师个人总结
2015/02/05 职场文书