js-PhotoSwipe相册功能
PhotoSwipe.js官网：http://photoswipe.com/ ，在这个网站上可以下载到PhotoSwipe的文件以及相关的例子。
这个组件主要是用来展示图片、相册用的。
1、导入依赖的js和css
<link rel="stylesheet prefetch" href="../css/photoswipe/photoswipe.css">
<link rel="stylesheet prefetch" href="../css/photoswipe/default-skin/default-skin.css">
<script src="../js/photoswipe/photoswipe.js">script>
<script src="../js/photoswipe/photoswipe-ui-default.min.js">script>2、PhotoSwipe（.pswp）元素添加到DOM
并列自己布局并放到底部
<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>3、初始化
执行PhotoSwipe构造函数。它接受4个参数：
- 从步骤2（它必须被添加到DOM）.pswp元件。
- PhotoSwipe UI类。如果包括了默认photoswipe-UI-default.js，类将是PhotoSwipeUI_Default。可以是假的。
- 与对象（幻灯片）阵列。
- options
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'https://placekitten.com/600/400',
w: 600,
h: 400
},
{
src: 'https://placekitten.com/1200/900',
w: 1200,
h: 900
}
];
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // start at first slide
};
// Initializes and opens PhotoSwipe
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();示例
html：
<button id="btn">Open PhotoSwipebutton>
<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>js：
var openPhotoSwipe = function() {
var pswpElement = document.querySelectorAll('.pswp')[0];
// build items array
var items = [
{
src: 'https://farm2.staticflickr.com/1043/5186867718_06b2e9e551_b.jpg',
w: 964,
h: 1024
},
{
src: 'https://farm7.staticflickr.com/6175/6176698785_7dee72237e_b.jpg',
w: 1024,
h: 683
}
];
// 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:
<script src="../js/photoswipe/photoswipe.js">script>
<script src="../js/photoswipe/photoswipe-ui-default.min.js">script>
<link rel="stylesheet prefetch" href="../css/photoswipe/photoswipe.css">
<link rel="stylesheet prefetch" href="../css/photoswipe/default-skin/default-skin.css">
<p ng-show="showPic" id="imgs" ng-cloak>
<img ng-repeat="srcImg in msg.picUrl"
ng-src="{{srcImg}}"
ng-click="toBigPic($index)"
alt=""
width="50%"
height="420px">
p>
<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--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>
JavaScript:
/*------看大图---------------------*/
$scope.toBigPic = function (pos) {
var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [];
var getItems = function () {
var aDiv = document.getElementById("imgs");
if (aDiv.hasChildNodes()) {
for (var i = 0; i < aDiv.children.length; i++) {
var img = aDiv.children;
var item = {
src: img[i].src,
w: img[i].naturalWidth,
h: img[i].naturalHeight
};
items.push(item);
console.log(i + "===child====" + (item.src));
console.log(i + "===child====" + (item.w));
console.log(i + "===child====" + (item.h));
}
}
};
getItems();
// define options (if needed)
var options = {
// history & focus options are disabled on CodePen
history: false,
focus: false,
index: pos,
showAnimationDuration: 0,
hideAnimationDuration: 0
};
var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
}
/*---------------------------------------------*/参考：
PhotoSwipe中文API(一)
PhotoSwipe.js 相册展示插件学习
移动web HTML5使用photoswipe模仿微信朋友圈图片放大浏览