纯Javascript画廊代码支持移动设备触摸切换

photoswipe

 

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

 

????

标签: