目的：本文主要介绍如何使用photoSwipe-master实现相册功能
1、 引入相关css和js
这些文件可以上PhotoSwipe-master的官网下载：http://photoswipe.com/
<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/photoswipe.css">
<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/default-skin/default-skin.css">
<script src="../PhotoSwipe-master/dist/photoswipe.min.js"></script>
<script src="../PhotoSwipe-master/dist/photoswipe-ui-default.min.js"></script>
2、在自己的html中添加一下代码
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<div class="pswp__container">
<!-- don't modify these 3 pswp__item elements, data is added later on -->
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<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>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<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>
function openPhotoSwipe() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'timg1.jpg',
w: 1200,
h: 700
},
{
src: 'timg2.jpg',
w: 1200,
h: 700
},{
src: 'timg3.jpg',
w: 1200,
h: 700
}
];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
openPhotoSwipe();
document.getElementById('btn').onclick = openPhotoSwipe;
到此就可以实现相册的功能了。
下面附上附上一个实例：
代码:
<html>
<head>
<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/photoswipe.css">
<link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/default-skin/default-skin.css">
<script src="../PhotoSwipe-master/dist/photoswipe.min.js"></script>
<script src="../PhotoSwipe-master/dist/photoswipe-ui-default.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
</head>
<body>
<div class="imgs">
<img src="timg1.jpg" width="500" height="300"/>
<img src="timg2.jpg" width="500" height="300"/>
<img src="timg3.jpg" width="500" height="300"/>
</div>
<!--添加PhotoSwipe的dom结构-->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- Background of PhotoSwipe.
It's a separate element, as animating opacity is faster than rgba(). -->
<div class="pswp__bg"></div>
<!-- Slides wrapper with overflow:hidden. -->
<div class="pswp__scroll-wrap">
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
<div class="pswp__container">
<!-- don't modify these 3 pswp__item elements, data is added later on -->
<div class="pswp__item"></div>
<div class="pswp__item"></div>
<div class="pswp__item"></div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<div class="pswp__ui pswp__ui--hidden">
<div class="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<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>
<!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
<!-- element will get class pswp__preloader--active when preloader is running -->
<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>
<script>
/**
打开相册
@param items 图片数组
@param index 当前点击图片索引
*/
function openPhotoSwipe(items,index) {
var pswpElement = document.querySelectorAll('.pswp')[0];
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
index: index,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
/**
点击图片，打开相册
*/
$(".imgs img").click(function(){
var items = [];
$(".imgs img").each(function(){
var item = {
src:$(this).attr("src"),
w: 1200,
h: 700
};
items.push(item);
});
var index=$(this).index();
openPhotoSwipe(items,index);
});
</script>
</body>
</html>
相册效果：
