PhotoSwipe:学习PhotoSwipe.js 相册展示插件

官网：http://photoswipe.com
github：https://github.com/dimsemenov/photoswipe

第一步

引入css、js

<!-- Core CSS file -->
<link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (styling of UI - buttons, caption, etc.)In the folder of skin CSS file there are also:- .png and .svg icons sprite, - preloader.gif (for browsers that do not support CSS animations) -->
<link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file -->
<script src="path/to/photoswipe.min.js"></script> <!-- UI JS file -->
<script src="path/to/photoswipe-ui-default.min.js"></script>

第二步

页面中必须加入以下代码结构（此结构是插件图片浏览必须代码，作者并没有集成到js中，所以使用者必须手动加入自己的网页中）

 <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结构代码，需要注意的是 data-pswp-uid在每个相册中必须是唯一的，data-size是指定放大时图片显示的宽和高，若指定的宽高与图片不符会导致显示的图片变形。

<!--data-pswp-uid在每个相册中必须是唯一的，data-size指定放大时图片显示的宽和高-->
<div class="my-gallery" data-pswp-uid="1"><!--渲染循环这一部分--><figure><a href="img/m3.jpg" data-size="670x712"><img src="img/m3.jpg"></a></figure>
</div>

第四步

在当前页面加入js代码

<script type="text/javascript">var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,size,item;for(var i = 0; i < numNodes; i++) {figureEl = thumbElements[i]; if(figureEl.nodeType !== 1) {continue;}linkEl = figureEl.children[0]; size = linkEl.getAttribute('data-size').split('x');item = {src: linkEl.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10)};if(figureEl.children.length > 1) {item.title = figureEl.children[1].innerHTML; }if(linkEl.children.length > 0) {item.msrc = linkEl.children[0].getAttribute('src');} item.el = figureEl; items.push(item);}return items;};var closest = function closest(el, fn) {return el && ( fn(el) ? el : closest(el.parentNode, fn) );};var onThumbnailsClick = function(e) {e = e || window.event;e.preventDefault ? e.preventDefault() : e.returnValue = false;var eTarget = e.target || e.srcElement;var clickedListItem = closest(eTarget, function(el) {return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode,childNodes = clickedListItem.parentNode.childNodes,numChildNodes = childNodes.length,nodeIndex = 0,index;for (var i = 0; i < numChildNodes; i++) {if(childNodes[i].nodeType !== 1) { continue; }if(childNodes[i] === clickedListItem) {index = nodeIndex;break;}nodeIndex++;}if(index >= 0) {openPhotoSwipe( index, clickedGallery );}return false;};var photoswipeParseHash = function() {var hash = window.location.hash.substring(1),params = {};if(hash.length < 5) {return params;}var vars = hash.split('&');for (var i = 0; i < vars.length; i++) {if(!vars[i]) {continue;}var pair = vars[i].split('=');  if(pair.length < 2) {continue;}           params[pair[0]] = pair[1];}if(params.gid) {params.gid = parseInt(params.gid, 10);}return params;};var openPhotoSwipe = function(index, galleryElement, disableAnimation, fromURL) {var pswpElement = document.querySelectorAll('.pswp')[0],gallery,options,items;items = parseThumbnailElements(galleryElement);options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnailpageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect(); return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};}};if(fromURL) {if(options.galleryPIDs) {for(var j = 0; j < items.length; j++) {if(items[j].pid == index) {options.index = j;break;}}} else {options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}if( isNaN(options.index) ) {return;}if(disableAnimation) {options.showAnimationDuration = 0;}gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();};var galleryElements = document.querySelectorAll( gallerySelector );for(var i = 0, l = galleryElements.length; i < l; i++) {galleryElements[i].setAttribute('data-pswp-uid', i+1);galleryElements[i].onclick = onThumbnailsClick;}var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid ,  galleryElements[ hashData.gid - 1 ], true, true );}
};initPhotoSwipeFromDOM('.my-gallery');</script>

结果

PhotoSwipe:学习PhotoSwipe.js 相册展示插件相关推荐

PhotoSwipe.js 相册展示插件学习
PhotoSwipe.js官网:http://photoswipe.com/ ,在这个网站上可以下载到PhotoSwipe的文件以及相关的例子. 这个组件主要是用来展示图片.相册用的,还是很实用的. ...
学习 | egg.js 中间件和插件
小小又开始学习了,这次学习的是中间件和插件. 这次将会对这两个点,进行学习. 中间件对于egg.js 来说,中间件和express的中间件性质相似,和洋葱模型类似. 这里首先讲解的是egg.js的中 ...
js和CSS3炫酷3D相册展示
<!doctype html> <html> <head> <meta charset="UTF"> <title>js ...
vue.js 天气插件_天气检查我的项目以学习Vue.js
vue.js 天气插件天气 (vue-weather) Weather checking me project for learning Vue.js. 天气检查我的项目以学习Vue.js. Vie ...
html photoswipe原理,PhotoSwipe异步动态加载图片方法
在开发搜房家居M站的时候,搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片. 特点:1. 家居提供的接口,每次只能获取一张图片 2. 装修效果图的张数不限. 3. 从Photo ...
html5手机端响应式图片相册幻灯片插件特效
html5手机端响应式图片相册幻灯片插件特效作品介绍 1.网页作品简介方面 :html5手机端响应式图片相册幻灯片插件特效 2.网页作品编辑方面:作品下载后可使用任意HTML编辑软件(例如:DW.H ...
【精心挑选】推荐几款非常棒的 jQuery 全景图片展示插件
之前的文章向大家分享了实现网站功能的各种插件,今天这篇文章向大家推荐7款精心挑选的 jQuery 全景图片展示插件,同时还有非常详细的制作教程可以参考.全景图片展示是一种非常有趣的技术,通过把多张图片 ...
php相册管理插件,相册插件-ZBLOGPHP插件-鸟儿网络
应用信息名称: 相册插件售价: 68元应用ID: Nobird_Photo 最低要求: Z-BlogPHP 1.5 Zero Build 151626 版本: 8.01 发布日期: 2013- ...
分享78个JS相册代码，总有一款适合您
分享78个JS相册代码,总有一款适合您 78个JS相册代码下载链接:https://pan.baidu.com/s/1rV_Mk-AF-bCLgwIccvrmAQ?pwd=y4el 提取码:y4el ...

PhotoSwipe:学习PhotoSwipe.js 相册展示插件

第一步

第二步

第三步

第四步

结果

PhotoSwipe:学习PhotoSwipe.js 相册展示插件相关推荐

最新文章

热门文章