Snipaste_2019-07-11_09-46-51.png
github地址：https://github.com/dimsemenov/photoswipe
文档地址：https://photoswipe.com/documentation/getting-started.html
Snipaste_2019-07-11_09-07-38.png
近2万的star，绝对可用
1. 安装
# npm安装
npm i photoswipe
或者
# git安装
git clone https://github.com/dimsemenov/PhotoSwipe.git
2. 使用
- 引入css，js
<link rel="stylesheet" href="path/to/photoswipe.css">
<link rel="stylesheet" href="path/to/default-skin/default-skin.css">
<script src="path/to/photoswipe.min.js"></script>
<script src="path/to/photoswipe-ui-default.min.js"></script>
- 在页面上增加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>
<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>
- 初始化和显示画廊
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
var options = {
index: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
3. 配合jquery简单封装
图片不是一成不变的，可能会随着条件动态刷新。我们希望点击图片以后展示图片画廊，并且定位到具体点击的那一副照片。假设要显示的图片的class是showImg
$(function() {
//给.showImg注册点击事件，并且未来元素也会注册事件（新增加的dom元素也有效果，见jquery事件绑定）
$("body").on("click", ".showImg", function() {
var index = $(".showImg").index(this);//获取点击图片在所有要显示图片里面的位置
var items = [];//将图片列表处理封装成photoSwipe需要的items的格式
$(".showImg").each(function(index, value) {
items.push({
src: $(value).prop("src"),
w: 600,
h: 600,
title: $(value).prop("title")
});
});
console.log(items);
openGallary(items, index);
});
});
//打开画廊
function openGallary(items, index) {
var pswpElement = document.querySelectorAll(".pswp")[0];
var items = items;
var options = {
index: index,
fullscreenEl: false,//不显示全屏
shareEl: false//不显示分享
};
var gallery = new PhotoSwipe(
pswpElement,
PhotoSwipeUI_Default,
items,
options
);
gallery.init();
}
4. 抽出多余的部分，再次封装
把每次都要重复的代码封装到一个js文件中（my-photoSwipe.js）
- 增加css,js
- 增加html片段
- 注册图片点击事件
这样别的功能需要使用画廊插件直接引入my-photoSwipe.js，不需要做任何操作。
这样做的好处是简单，能批量化使用，要修改统一修改。坏处就是个性化配置困难了。
var photoSwipePath = __CreateJSPath("my-photoSwipe.js");
photoSwipePath = photoSwipePath.substring(0, photoSwipePath.length - 1);
document.write(
'<link rel="stylesheet" href="' + photoSwipePath + '/photoswipe.css" />'
);
document.write(
'<link rel="stylesheet" href="' +
photoSwipePath +
'/default-skin/default-skin.css" />'
);
document.write(
'<script src="' +
photoSwipePath +
'/photoswipe.min.js" type="text/javascript" ></script>'
);
document.write(
'<script src="' +
photoSwipePath +
'/photoswipe-ui-default.min.js" type="text/javascript" ></script>'
);
//打开画廊
function openGallary(items, index) {
var pswpElement = document.querySelectorAll(".pswp")[0];
// build items array
var items = items;
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: index, // start at first slide
fullscreenEl: false,
shareEl: false
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe(
pswpElement,
PhotoSwipeUI_Default,
items,
options
);
gallery.init();
}
function addGallaryDom() {
if ($(".pswp").length > 0) return;
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>' +
' <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").append(html);
}
function __CreateJSPath(js) {
var scripts = document.getElementsByTagName("script");
var path = "";
for (var i = 0, l = scripts.length; i < l; i++) {
var src = scripts[i].src;
if (src.indexOf(js) != -1) {
var ss = src.split(js);
path = ss[0];
break;
}
}
var href = location.href;
href = href.split("#")[0];
href = href.split("?")[0];
var ss = href.split("/");
ss.length = ss.length - 1;
href = ss.join("/");
if (
path.indexOf("https:") == -1 &&
path.indexOf("http:") == -1 &&
path.indexOf("file:") == -1 &&
path.indexOf("/") != 0
) {
path = href + "/" + path;
}
return path;
}
$(function() {
addGallaryDom();
$("body").on("click", ".showImg", function() {
var index = $(".showImg").index(this);
console.log(index);
var items = [];
$(".showImg").each(function(index, value) {
items.push({
src: $(value).prop("src"),
w: 600,
h: 600,
title: $(value).prop("title")
});
});
console.log(items);
openGallary(items, index);
});
});
网友评论