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 Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
jQuery中each()方法用法实例
Dec 27 Javascript
运行Node.js的IIS扩展iisnode安装配置笔记
Mar 02 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 jQuery
解决Nuxt使用axios跨域问题
Jul 06 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
基于vue+echarts数据可视化大屏展示的实现
Dec 25 Vue.js
JavaScript架构localStorage特殊场景下二次封装操作
Jun 21 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/06/20 PHP
PHP判断指定时间段的2个方法
2014/03/14 PHP
php中ob_get_length缓冲与获取缓冲长度实例
2014/11/20 PHP
给ECShop添加最新评论
2015/01/07 PHP
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
JQuery 两种方法解决刚创建的元素遍历不到的问题
2016/04/13 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
2016/12/23 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
2017/11/20 Javascript
深入浅析Vue中的slots/scoped slots
2018/04/03 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
clipboard在vue中的使用的方法示例
2018/10/19 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
使用Python脚本对Linux服务器进行监控的教程
2015/04/02 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
Python将文本去空格并保存到txt文件中的实例
2018/07/24 Python
Pyqt5 实现跳转界面并关闭当前界面的方法
2019/06/19 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
如何基于python实现画不同品种的樱花树
2020/01/03 Python
Python类绑定方法及非绑定方法实例解析
2020/10/09 Python
python 用pandas实现数据透视表功能
2020/12/21 Python
加拿大服装和鞋类零售商:Mark’s
2021/01/04 全球购物
社会实践评语
2014/04/28 职场文书
升旗仪式演讲稿
2014/05/08 职场文书
2014小学二年级班主任工作总结
2014/12/05 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
清明节网上祭英烈寄语2015
2015/03/04 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
CSS 实现多彩、智能的阴影效果
2021/05/12 HTML / CSS
python 提取html文本的方法
2021/05/20 Python
解决Springboot PostMapping无法获取数据的问题
2022/05/06 Java/Android