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

并列自己布局并放到底部

<!-- 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 of them in the DOM to save memory.Don't modify these 3 pswp__item elements, data is added later on. --><div class="pswp__container"><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>

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 PhotoSwipe</button><!--以下内容固定-->
<!-- 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>

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:

<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><!--不需要分享和全屏就可以注释掉--><!---------------photoswipe开始----------------------->
<!-- 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 of them in the DOM to save memory.Don't modify these 3 pswp__item elements, data is added later on. --><div class="pswp__container"><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><!-- 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>
<!--------------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 CodePenhistory: 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模仿微信朋友圈图片放大浏览

js-PhotoSwipe相册功能相关推荐

功能强大漂亮的js图片相册,js点击小图显示大图
原生js点击图片触发弹窗页面显示模糊的小图片(small_X.jpg),点击全屏显示高清大图片(large_X.jpg) 可实现放大.缩小.拖拽.旋转.上一张.下一张以下为demo相关页面展示: ...
Hexo+Github实现相册功能
Hexo+Github实现相册功能最终效果请看这里:http://lawlite.me/photos/ 一.说明 1.关于我使用的主题是hexo-theme-yilia,其中实现相册功能的方案是同 ...
《从0到1上线微信小游戏》第十二节实现截图和保存到相册功能
第十二节实现截图和保存到相册功能新建节点截图功能保存到相册在这一小节中,我们将通过调用微信小游戏API来给俄罗斯方块这个游戏加上截图和保存到相册这两个功能. 如果大家还需要实现截图后的预览功 ...
Hexo+yilia+Github实现相册功能（超详细）
文章目录一.目的: 二.方案三.实现 1.博客页面添加相册 2.GitHub操作 3.修改代码注意(第一个容易出错的地方): 4. 添加脚本注意(第二个错误地方-重点):如果没有这一步可能缩略 ...
Hexo yilia 主题添加相册功能
当我们使用hexo博客框架中的yilia主题时,在我们这一博客页面中,原作者Litten并未帮我们添加相册这一功能.这时,如果想让我们的博客拥有相册的功能,就需要我们自行添加改变.添加主题中的相关参数 ...
原生js手机相册制作原创
饭后茶余.写着玩的,适用于初学者做参考的 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
GitHub上搭建博客增加相册功能
目标在github上成功搭建Hexo博客实现在博客上浏览图片,添加图片功能最终效果:https://wonderxiao.github.io/ 说明使用主题:hexo-theme-yilia来 ...
chosen.jquery.js 有搜索功能、多选功能的下拉框插件
chosen.jquery.js 有搜索功能.多选功能的下拉框插件官方源码: https://github.com/harvesthq/chosen 该源码中的样例index.html有该插件的详 ...
JS实现sleep功能 JS遍历document对象
标题:JS实现sleep功能 JS遍历document对象/*****************************************/ var elementName; function c ...

js-PhotoSwipe相册功能

1、导入依赖的js和css

2、PhotoSwipe（.pswp）元素添加到DOM

项目中使用：

参考：

js-PhotoSwipe相册功能相关推荐

最新文章

热门文章