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 相关文章推荐
一个简单的JS时间控件示例代码(JS时分秒时间控件)
Nov 22 Javascript
jQuery实现table隔行换色和鼠标经过变色的两种方法
Jun 15 Javascript
28个常用JavaScript方法集锦
Jan 14 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
livereload工具实现前端可视化开发【推荐】
Dec 23 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
vue router仿天猫底部导航栏功能
Oct 18 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
详解Vue取消eslint语法限制
Aug 04 Javascript
发布一款npm包帮助理解npm的使用
Jan 03 Javascript
使用JS判断页面是首次被加载还是刷新
May 26 Javascript
详解React中共享组件逻辑的三种方式
Feb 02 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP中调用ASP.NET的WebService的代码
2011/04/22 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
php通过function_exists检测函数是否存在的方法
2015/03/18 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
js使用递归解析xml
2014/12/12 Javascript
如何减少浏览器的reflow和repaint
2015/02/26 Javascript
JS+CSS实现电子商务网站导航模板效果代码
2015/09/10 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
javascript数组去重方法分析
2016/12/15 Javascript
canvas的神奇用法
2017/02/03 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
vue+moment实现倒计时效果
2019/08/26 Javascript
Linux下使用python调用top命令获得CPU利用率
2015/03/10 Python
python搭建虚拟环境的步骤详解
2016/09/27 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
美国婴儿用品店:Babies”R”Us
2017/10/12 全球购物
写给女生的道歉信
2014/01/08 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
建筑工程材料员岗位职责
2015/04/11 职场文书
中学教师师德师风承诺书
2015/04/28 职场文书
活动经费申请报告
2015/05/15 职场文书
2015年出纳工作总结与计划
2015/05/18 职场文书
整脏治乱工作简报
2015/07/21 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
导游词之桂林山水
2019/09/20 职场文书
Vscode中SSH插件如何远程连接Linux
2022/05/02 Servers