利用PhotoSwipe插件实现图片预览
由于安卓项目涉及到h5页面嵌入,需要查看图片相册集,本来打算使用baguetteBox,但是它不太兼容手机,并且页面效果跟灵活性欠缺,后来在文档中看到PhotoSwipe,虽然开发者很懒,好多东西东西没有嵌入到插件中,但是使用效果还是不错的
首先根据他提供的git,我发现有好多没有用的文件,于是决定不使用composer,直接把有用的文件放入到项目中,可以选择压缩发布版dist,也可以选用src源码版,这里才用的是dist
首先 引入css
- <link rel="stylesheet prefetch" href="photoswipe/css/photoswipe.css">
- <link rel="stylesheet prefetch" href="photoswipe/css/default-skin/default-skin.css">
js放到最后
- <script src="photoswipe/js/photoswipe.js"></script>
- <script src="photoswipe/js/photoswipe-ui-default.min.js"></script>
开发者很懒,需要引入它的PhotoSwipe元素到DOM中
- <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代码
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
- <meta name="apple-touch-fullscreen" content="yes"> <!-- 一会试验下是否有必要存在 -->
- <meta name="apple-mobile-web-app-capable" content="yes">
- <meta name="apple-mobile-web-app-status-bar-style" content="black">
- <meta name="format-detection" content="telephone=no">
- <meta http-equiv="x-rim-auto-match" content="none"/>
- <meta name="HandheldFriendly" content="true"/>
-
- <link rel="stylesheet" href="news_css/news_1.css">
- <link rel="stylesheet" href="news_css/news_2.css">
- <link rel="stylesheet prefetch" href="photoswipe/css/photoswipe.css">
- <link rel="stylesheet prefetch" href="photoswipe/css/default-skin/default-skin.css">
- <style>
- * {margin: 0;padding: 0;}
- .clearfix::before, .clearfix::after {
- display: block;
- content: '';
- visibility: hidden;
- height: 100%;
- clear: both;
- }
- body {padding-top: 2%;}
- .my-gallery {width:96%;margin: 0 auto;}
- .my-gallery .img-dv {width:100%;margin-bottom: 1%;}
- .my-gallery .img-dv a {display:block;width:100%;text-align: center}
- .my-gallery .img-dv a img {width:100%;}
- </style>
- </head>
- <body>
- <div class="wrapper" style="color:#333333;font-size: 15px">
- <header class="con_hd infoBg">
- <a href="?app=app_order@detail&order_id={$order_id}" class="hd-back"></a>
- <h2 class="hd-tit">{$data.name}</h2>
- </header>
-
- <div class="my-gallery" data-pswp-uid="1">
- {foreach $data['img_list'] $k=>$v}
- <figure>
- <div class="img-dv"><a href="{$v['value']}" data-size="1920x1080"><img src="{$v['value']}"></a></div>
- <figcaption style="display:none;">{$v['name']}</figcaption>
- </figure>
- {/foreach}
-
- </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>
- </body>
- <script src="photoswipe/js/photoswipe.js"></script>
- <script src="photoswipe/js/photoswipe-ui-default.min.js"></script>
- <script type="text/javascript">
- var initPhotoSwipeFromDOM = function(gallerySelector) {
- // 解析来自DOM元素幻灯片数据(URL,标题,大小...)
- var parseThumbnailElements = function(el) {
- var thumbElements = el.childNodes,
- numNodes = thumbElements.length,
- items = [],
- figureEl,
- linkEl,
- size,
- item,
- divEl;
- for(var i = 0; i < numNodes; i++) {
- figureEl = thumbElements[i]; // <figure> element
- // 仅包括元素节点
- if(figureEl.nodeType !== 1) {
- continue;
- }
- divEl = figureEl.children[0];
- linkEl = divEl.children[0]; // <a> element
- size = linkEl.getAttribute('data-size').split('x');
- // 创建幻灯片对象
- item = {
- src: linkEl.getAttribute('href'),
- w: parseInt(size[0], 10),
- h: parseInt(size[1], 10)
- };
- if(figureEl.children.length > 1) {
- item.title = figureEl.children[1].innerHTML;
- }
- if(linkEl.children.length > 0) {
- // <img> 缩略图节点, 检索缩略图网址
- item.msrc = linkEl.children[0].getAttribute('src');
- }
- item.el = figureEl; // 保存链接元素 for getThumbBoundsFn
- items.push(item);
- }
- return items;
- };
-
- // 查找最近的父节点
- var closest = function closest(el, fn) {
- return el && ( fn(el) ? el : closest(el.parentNode, fn) );
- };
-
- // 当用户点击缩略图触发
- var onThumbnailsClick = function(e) {
- e = e || window.event;
- e.preventDefault ? e.preventDefault() : e.returnValue = false;
- var eTarget = e.target || e.srcElement;
- var clickedListItem = closest(eTarget, function(el) {
- return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');
-
原文地址:https://blog.csdn.net/lunsunhuan1825/article/details/96474155
广告一下
- 热门教程
- PHP7报A non well formed numeric value encountered 0
- Linux系统下关闭mongodb的几种命令分享 0
- mongodb删除数据、删除集合、删除数据库的命令 0
- Git&Github极速入门与攻坚实战课程 0
- python爬虫教程使用Django和scrapy实现 0
- libnetsnmpmibs.so.31: cannot open shared object file 0
- 数据结构和算法视频教程 0
- redis的hash结构怎么删除数据呢? 0
- C++和LUA解析器的数据交互实战视频 0
- mongodb errmsg" : "too many users are authenticated 0
- C++基础入门视频教程 0
- 用30个小时精通C++视频教程可能吗? 0
- C++分布式多线程游戏服务器开发视频教程socket tcp boost库 0
- C++培训教程就业班教程 0
- layui的util工具格式时间戳为字符串 0
- C++实战教程之远程桌面远程控制实战 1
- 网络安全培训视频教程 0
- LINUX_C++软件工程师视频教程高级项目实战 0
- C++高级数据结构与算法视频教程 0
- 跨域问题很头疼?通过配置nginx轻松解决ajax跨域问题 0
热门标签
- 相关文章
- 【译】JavaScript数据结构(3):单向链表与双向链表 16
- 10个JavaScript难点 16
- 【译】苹果拒绝支持PWA,有损Web的未来 16
- iView 一周年了,同时发布了 2.0 正式版,但这只是开始... 16
- nodejs+mongodb构建一个简单登录注册功能 16
- 【译】JavaScript数据结构(4):树 16
- 组件化开发与黑箱 16
- TypeScript - 不止稳,而且快 16
- webpack3+anujs+ReactCSSTransitionGroup 16
- 原生js实现图片放大镜效果 16
- WEB缓存探究第二弹——实战 16
- 纯笔记:vfork 的一些使用场景(顺便讲一下 fork 的原理) 16
- Android APP 内部捐赠实现(支付宝&微信) 16
- WKWebView 的一些小总结 16
- 模型评价(一) AUC大法 16
- 开始使用GraphQL 16
- Webpack模块化原理简析 16
- gulp使用问题记录 16
- 使用Angular4动画为页面添彩 16
- Python27 Matplotlib (win64 python2.7) 安装及简单使用 16