<!doctype html>
<html lang="zh-cn">
<meta name="viewport" content="width=device-width, user-scalable=no">
<meta charset="UTF-8">
<head>
<title>photoswiper插件</title>
</head>
<body>
<div id="div1"></div>
<link href="../photoswipe/photoswipe.css" rel="stylesheet" />
<link href="../photoswipe/default-skin.css" rel="stylesheet" />
<script src="../photoswipe/photoswipe.min.js"></script>
<script src="../photoswipe/photoswipe-ui-default.min.js"></script>
<script>
var items=[];
/*此处为后台返回给你的图片地址*/
var data=[{
img:"https://office-cs-upload.hs350.com/default/20181206/093202.jpg"
},
{
img:'https://office-cs-upload.hs350.com/default/20181015/171537.png'
},
{
img:"https://office-cs-upload.hs350.com/default/20180926/115215.jpg"
},{
img:"https://office-cs-upload.hs350.com/default/20181016/174145.png"
},{
img:"https://office-cs-upload.hs350.com/video/picture/20181122/094301.png"
}];
var openPhotoSwipe = function(curentindex) {
var pswpElement = document.querySelectorAll('.pswp')[0];
var options = {
history : false,
focus : false,
index : curentindex,
showAnimationDuration : 0,
hideAnimationDuration : 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
};
// openPhotoSwipe();
document.getElementById('btn').onclick = function(){
var imgcount=0;
$.each(data, function(index,value) {
items = [];
var img = new Image();
img.src = value.img;
img.onload = function(event) {
var nobj = {};
imgcount++;
nobj.src = data[index].img;
nobj.h = event.currentTarget.height;
nobj.w = event.currentTarget.width;
items.push(nobj);
if (imgcount == data.length) {
var a = '<div id="gallery" class="pswp" tabindex="-1" role="dialog" aria-hidden="true"><div class="pswp__bg"/> <div class="pswp__scroll-wrap"> <div class="pswp__container"><div class="pswp__item"/><div class="pswp__item"/><div class="pswp__item"/> </div> <div class="pswp__ui pswp__ui--hidden"> <div class="pswp__top-bar"> <div class="pswp__counter" style="padding-top:10px;"/> <button class="pswp__button pswp__button--close" title="Close (Esc)" style="margin-top:10px;"/> <button class="pswp__button pswp__button--zoom" title="Zoom in/out"/> <div class="pswp__preloader"> <div class="pswp__preloader__icn"> <div class="pswp__preloader__cut"> <div class="pswp__preloader__donut"/> </div> </div> </div> </div> <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"> <div class="pswp__share-tooltip"/> </div> <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)"/> <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)"/> <div class="pswp__caption"> <div class="pswp__caption__center"/> </div> </div> </div> </div> ';
$("#div1").append($(a));
openPhotoSwipe(0);
}
};
});
};
</script>
</body>
</html>
插件地址 http://photoswipe.com/documentation/getting-started.html