#1简介
PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone、iPad,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品。
官方网站:http://photoswipe.com/
源码下载:https://github.com/dimsemenov/photoswipe
国内CDN:http://www.bootcdn.cn/photoswipe/
#2引入插件
引入以下4个插件:
1.https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.css
2. https://cdn.bootcss.com/photoswipe/4.1.2/default-skin/default-skin.css
3. https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe.js
4. https://cdn.bootcss.com/photoswipe/4.1.2/photoswipe-ui-default.min.js
#3写出html结构
<div class="my-simple-gallery photos" itemscope>
<figure itemscope style="display:inline-block">
<a href="{imgSrc}" itemprop="contentUrl" data-size="{$vo.size}">
<img src="{imgSrc}" itemprop="thumbnail" alt="Image description"/>
</a>
</figure>
</div>
#4加入启动代码
// 启动html
<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>