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 相关文章推荐
prototype 中文参数乱码解决方案
Nov 09 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
解决ExtJS在chrome或火狐中正常显示在ie中不显示的浏览器兼容问题
Jan 11 Javascript
js网页实时倒计时精确到秒级
Feb 10 Javascript
javascript最基本的函数汇总
Jun 25 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
基于jQuery实现仿百度首页选项卡切换效果
May 29 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 Javascript
JS兼容所有浏览器的DOMContentLoaded事件
Jan 12 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
微信小程序实现多选框全选与反全选及购物车中删除选中的商品功能
Dec 17 Javascript
js实现html滑动图片拼图验证
Jun 24 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/07/17 PHP
PHP判断文件是否存在、是否可读、目录是否存在的代码
2012/10/03 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php中执行系统命令的方法
2015/03/21 PHP
PHP获取用户访问IP地址的5种方法
2016/05/16 PHP
Yii框架表单模型和验证用法
2016/05/20 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
jquery实现marquee效果(文字或者图片的水平垂直滚动)
2013/01/07 Javascript
PHP abstract与interface之间的区别
2013/11/11 Javascript
JS控件ASP.NET的treeview控件全选或者取消(示例代码)
2013/12/16 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
推荐阅读的js快速判断IE浏览器(兼容IE10与IE11)
2015/12/13 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
js实现随机抽选效果、随机抽选红色球效果
2017/01/13 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
Vue源码学习之初始化模块init.js解析
2017/11/02 Javascript
VueJs使用Amaze ui调整列表和内容页面
2017/11/30 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
2020/08/07 Javascript
python中cPickle用法例子分享
2014/01/03 Python
python字典多键值及重复键值的使用方法(详解)
2016/10/31 Python
Python输入二维数组方法
2018/04/13 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
解决安装新版PyQt5、PyQT5-tool后打不开并Designer.exe提示no Qt platform plugin的问题
2020/04/24 Python
MySQL面试题
2014/01/12 面试题
《音乐之都维也纳》教学反思
2014/04/16 职场文书
赵乐秦在党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
MongoDB 常用的crud操作语句
2021/06/20 MongoDB
python机器学习实现oneR算法(以鸢尾data为例)
2022/03/03 Python
vue elementUI表格控制对应列
2022/04/13 Vue.js
GoFrame基于性能测试得知grpool使用场景
2022/06/21 Golang