js-PhotoSwipe相册功能
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了js-PhotoSwipe相册功能，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含10378字，纯文字阅读大概需要15分钟。
内容图文
PhotoSwipe.js官网：http://photoswipe.com/ ，在这个网站上可以下载到PhotoSwipe的文件以及相关的例子。
这个组件主要是用来展示图片、相册用的。
1、导入依赖的js和css
<linkrel="stylesheet prefetch"href="../css/photoswipe/photoswipe.css">
<linkrel="stylesheet prefetch"href="../css/photoswipe/default-skin/default-skin.css">
<scriptsrc="../js/photoswipe/photoswipe.js">
</script>
<scriptsrc="../js/photoswipe/photoswipe-ui-default.min.js">
</script>
2、PhotoSwipe（.pswp）元素添加到DOM
并列自己布局并放到底部
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<divclass="pswp"tabindex="-1"role="dialog"aria-hidden="true">
<!-- Background of PhotoSwipe.
It‘s a separate element as animating opacity is faster than rgba(). -->
<divclass="pswp__bg">
</div>
<!-- Slides wrapper with overflow:hidden. -->
<divclass="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don‘t modify these 3 pswp__item elements, data is added later on. -->
<divclass="pswp__container">
<divclass="pswp__item">
</div>
<divclass="pswp__item">
</div>
<divclass="pswp__item">
</div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<divclass="pswp__ui pswp__ui--hidden">
<divclass="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<divclass="pswp__counter">
</div>
<!--关闭窗口-->
<buttonclass="pswp__button pswp__button--close"title="Close (Esc)">
</button>
<!--分享-->
<buttonclass="pswp__button pswp__button--share"title="Share">
</button>
<!--全屏-->
<buttonclass="pswp__button pswp__button--fs"title="Toggle fullscreen">
</button>
<!--放大缩小-->
<buttonclass="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 -->
<divclass="pswp__preloader">
<divclass="pswp__preloader__icn">
<divclass="pswp__preloader__cut">
<divclass="pswp__preloader__donut">
</div>
</div>
</div>
</div>
</div>
<divclass="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<divclass="pswp__share-tooltip">
</div>
</div>
<buttonclass="pswp__button pswp__button--arrow--left"title="Previous (arrow left)">
</button>
<buttonclass="pswp__button pswp__button--arrow--right"title="Next (arrow right)">
</button>
<divclass="pswp__caption">
<divclass="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 arrayvar 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 PhotoSwipevar gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();
示例
html：
<buttonid="btn">Open PhotoSwipe</button><!--以下内容固定--><!-- Root element of PhotoSwipe. Must have class pswp. --><divclass="pswp"tabindex="-1"role="dialog"aria-hidden="true"><!-- Background of PhotoSwipe.
It‘s a separate element, as animating opacity is faster than rgba(). --><divclass="pswp__bg"></div><!-- Slides wrapper with overflow:hidden. --><divclass="pswp__scroll-wrap"><!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. --><divclass="pswp__container"><!-- don‘t modify these 3 pswp__item elements, data is added later on --><divclass="pswp__item"></div><divclass="pswp__item"></div><divclass="pswp__item"></div></div><!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. --><divclass="pswp__ui pswp__ui--hidden"><divclass="pswp__top-bar"><!-- Controls are self-explanatory. Order can be changed. --><divclass="pswp__counter"></div><buttonclass="pswp__button pswp__button--close"title="Close (Esc)"></button><buttonclass="pswp__button pswp__button--share"title="Share"></button><buttonclass="pswp__button pswp__button--fs"title="Toggle fullscreen"></button><buttonclass="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 --><divclass="pswp__preloader"><divclass="pswp__preloader__icn"><divclass="pswp__preloader__cut"><divclass="pswp__preloader__donut"></div></div></div></div></div><divclass="pswp__share-modal pswp__share-modal--hidden pswp__single-tap"><divclass="pswp__share-tooltip"></div></div><buttonclass="pswp__button pswp__button--arrow--left"title="Previous (arrow left)"></button><buttonclass="pswp__button pswp__button--arrow--right"title="Next (arrow right)"></button><divclass="pswp__caption"><divclass="pswp__caption__center"></div></div></div></div></div>
js：
var openPhotoSwipe = function() {var pswpElement = document.querySelectorAll(‘.pswp‘)[0];
// build items arrayvar 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:
<scriptsrc="../js/photoswipe/photoswipe.js">
</script>
<scriptsrc="../js/photoswipe/photoswipe-ui-default.min.js">
</script>
<linkrel="stylesheet prefetch"href="../css/photoswipe/photoswipe.css">
<linkrel="stylesheet prefetch"href="../css/photoswipe/default-skin/default-skin.css">
<png-show="showPic"id="imgs"ng-cloak>
<imgng-repeat="srcImg in msg.picUrl"ng-src="
{{srcImg}}
"
ng-click="toBigPic($index)"alt=""width="50%"height="420px">
</p>
<!--不需要分享和全屏就可以注释掉-->
<!---------------photoswipe开始----------------------->
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<divclass="pswp"tabindex="-1"role="dialog"aria-hidden="true">
<!-- Background of PhotoSwipe.
It‘s a separate element as animating opacity is faster than rgba(). -->
<divclass="pswp__bg">
</div>
<!-- Slides wrapper with overflow:hidden. -->
<divclass="pswp__scroll-wrap">
<!-- Container that holds slides.
PhotoSwipe keeps only 3 of them in the DOM to save memory.
Don‘t modify these 3 pswp__item elements, data is added later on. -->
<divclass="pswp__container">
<divclass="pswp__item">
</div>
<divclass="pswp__item">
</div>
<divclass="pswp__item">
</div>
</div>
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
<divclass="pswp__ui pswp__ui--hidden">
<divclass="pswp__top-bar">
<!-- Controls are self-explanatory. Order can be changed. -->
<divclass="pswp__counter">
</div>
<buttonclass="pswp__button pswp__button--close"title="Close (Esc)">
</button>
<!--<button title="Share"></button>-->
<!--<button title="Toggle fullscreen"></button>-->
<buttonclass="pswp__button pswp__button--zoom"title="Zoom in/out">
</button>
<!-- element will get class pswp__preloader--active when preloader is running -->
<divclass="pswp__preloader">
<divclass="pswp__preloader__icn">
<divclass="pswp__preloader__cut">
<divclass="pswp__preloader__donut">
</div>
</div>
</div>
</div>
</div>
<divclass="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
<divclass="pswp__share-tooltip">
</div>
</div>
<buttonclass="pswp__button pswp__button--arrow--left"title="Previous (arrow left)">
</button>
<buttonclass="pswp__button pswp__button--arrow--right"title="Next (arrow right)">
</button>
<divclass="pswp__caption">
<divclass="pswp__caption__center">
</div>
</div>
</div>
</div>
</div>
<!--------------photoswipe结束------------------->
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();
}
/*---------------------------------------------*/
参考：
原文：http://blog.csdn.net/sinat_31057219/article/details/69941815
内容总结
以上是互联网集市为您收集整理的js-PhotoSwipe相册功能全部内容，希望文章能够帮你解决js-PhotoSwipe相册功能所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】