js-PhotoSwipe相册功能
来源:互联网 发布:如何查域名绑定的空间 编辑:程序博客网 时间:2024/04/29 14:34
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 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:
<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 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><!--不需要分享和全屏就可以注释掉--><!---------------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 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模仿微信朋友圈图片放大浏览
0 0
- js-PhotoSwipe相册功能
- 使用PhotoSwipe-master实现相册功能
- PhotoSwipe.js 相册展示插件学习
- js PhotoSwipe库开源的手机版相册产品的Code.PhotoSwipe.attach方法使用
- photoswipe.js插件
- photoswipe.min.js 使用
- [JS插件] PhotoSwipe 图片浏览插件使用方法
- photoswipe实现图片放大功能在java中应用
- 相册js
- photoswipe.js——移动端图片文字放大缩小
- JS 创建相册 替换相册
- IOS相册功能
- IOS相册功能
- 截图保存相册功能
- ios 相册功能
- IOS相册功能
- react native 相册功能
- PhotoSwipe简介
- tomcat之三种部署方式
- 转载的内容需要看看
- html、css、js、jquery之间的关系
- php,java实现备忘录模式
- 千分位&手机号验证&身份证号验证
- js-PhotoSwipe相册功能
- Mybatis学习——解决列名不匹配的方式
- 2-SAT
- Tomcat解惑 之 CATALINA_HOME与CATALINA_BASE
- dp专题 第九题 移动路线
- 程序员面试必问系列——Java基础知识考查2
- Android服务的优化以及流氓进程的基础知识!
- prstat参数参考大全
- wix