轉載]?[JS插件] PhotoSwipe 圖片瀏覽插件使用方法

一、介紹

---

PhotoSwipe 是專為移動觸摸設備設計的相冊/畫廊.兼容所有iPhone、iPad、黑莓6+,以及桌面瀏覽器.底層實現基于HTML/CSS/JavaScript,是一款免費開源的相冊產品。

官方網站：http://photoswipe.com/
源碼下載：https://github.com/dimsemenov/photoswipe
國內CDN：http://www.bootcdn.cn/photoswipe/

二、構建網頁，引入相關文件

---

1、新建html頁面，如果是移動端看的話，需要在頁面頭部插入視口說明：

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

2、引入 photoswipe.css、default-skin.css 文件，引入 photoswipe.js、photoswipe-ui-default.js 文件。

<link href="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.css" rel="stylesheet"> <link href="http://cdn.bootcss.com/photoswipe/4.1.1/default-skin/default-skin.css" rel="stylesheet"> <script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe.js"></script> <script src="http://cdn.bootcss.com/photoswipe/4.1.1/photoswipe-ui-default.js"></script>

三、寫出你的圖片相冊結構，并配上樣式

---

比如你有2張圖片，則結構如下：

<div id="demo-test-gallery" class="demo-gallery"><a href="https://farm4.staticflickr.com/3894/15008518202_c265dfa55f_h.jpg" data-size="1600x1600" data-med="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_b.jpg" data-med-size="1024x1024"><img src="https://farm4.staticflickr.com/3894/15008518202_b016d7d289_m.jpg" alt="" /></a><a href="https://farm6.staticflickr.com/5591/15008867125_b61960af01_h.jpg" data-size="1600x1068" data-med="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_b.jpg" data-med-size="1024x1024"><img src="https://farm6.staticflickr.com/5591/15008867125_68a8ed88cc_m.jpg" alt="" /></a> </div>

注意：一定要有“data-med”這個屬性，否則在移動端顯示不出來；一定要用一個容器把圖片包含起來。

四、必要的啟動代碼

---

首先必須要寫出來相冊層必要的結構代碼，因為這一部分作者沒有集成到他的JS里面，所以要自己加上去，代碼如下：

<!-- 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>

然后加上必要的js啟動代碼：

<script type="text/javascript">(function() {var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for(var i = 0; i < numNodes; i++) {el = thumbElements[i];// include only element nodesif(el.nodeType !== 1) {continue;}childElements = el.children;size = el.getAttribute('data-size').split('x');// create slide objectitem = {src: el.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10),author: el.getAttribute('data-author')};item.el = el; // save link to element for getThumbBoundsFnif(childElements.length > 0) {item.msrc = childElements[0].getAttribute('src'); // thumbnail urlif(childElements.length > 1) {item.title = childElements[1].innerHTML; // caption (contents of figure)}}var mediumSrc = el.getAttribute('data-med');if(mediumSrc) {size = el.getAttribute('data-med-size').split('x');// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt(size[0], 10),h: parseInt(size[1], 10)};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push(item);}return items;};// find nearest parent elementvar 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 === 'A';});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode;var 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) { // pid=1return 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);// define options (if needed)options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function(item, captionEl, isFake) {if(!item.title) {captionEl.children[0].innerText = '';return false;}captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if(fromURL) {if(options.galleryPIDs) {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor(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);}// exit if index not foundif( isNaN(options.index) ) {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen('beforeResize', function() {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min(dpiRatio, 2.5);realViewportWidth = gallery.viewportSize.x * dpiRatio;if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {if(!useLargeImages) {useLargeImages = true;imageSrcWillChange = true;}} else {if(useLargeImages) {useLargeImages = false;imageSrcWillChange = true;}}if(imageSrcWillChange && !firstResize) {gallery.invalidateCurrItems();}if(firstResize) {firstResize = false;}imageSrcWillChange = false;});gallery.listen('gettingData', function(index, item) {if( useLargeImages ) {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}});gallery.init();};// select all gallery elementsvar 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;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.demo-gallery');})();

五、可以外鏈的js文件

---

如果你不想在頁面里寫入過多的代碼，可以把上面的div和js都寫到一個文件里，然后引入進來也可以，請把以下代碼保存為.js文件吧：

document.writeln("<!-- Root element of PhotoSwipe. Must have class pswp. -->"); document.writeln("<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">"); document.writeln(""); document.writeln(" <!-- Background of PhotoSwipe."); document.writeln(" It\'s a separate element as animating opacity is faster than rgba(). -->"); document.writeln(" <div class=\"pswp__bg\"><\/div>"); document.writeln(""); document.writeln(" <!-- Slides wrapper with overflow:hidden. -->"); document.writeln(" <div class=\"pswp__scroll-wrap\">"); document.writeln(""); document.writeln(" <!-- Container that holds slides."); document.writeln(" PhotoSwipe keeps only 3 of them in the DOM to save memory."); document.writeln(" Don\'t modify these 3 pswp__item elements, data is added later on. -->"); document.writeln(" <div class=\"pswp__container\">"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <div class=\"pswp__item\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->"); document.writeln(" <div class=\"pswp__ui pswp__ui--hidden\">"); document.writeln(""); document.writeln(" <div class=\"pswp__top-bar\">"); document.writeln(""); document.writeln(" <!-- Controls are self-explanatory. Order can be changed. -->"); document.writeln(""); document.writeln(" <div class=\"pswp__counter\"><\/div>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--share\" title=\"Share\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"><\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in\/out\"><\/button>"); document.writeln(""); document.writeln(" <!-- Preloader demo http:\/\/codepen.io\/dimsemenov\/pen\/yyBWoR -->"); document.writeln(" <!-- element will get class pswp__preloader--active when preloader is running -->"); document.writeln(" <div class=\"pswp__preloader\">"); document.writeln(" <div class=\"pswp__preloader__icn\">"); document.writeln(" <div class=\"pswp__preloader__cut\">"); document.writeln(" <div class=\"pswp__preloader__donut\"><\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">"); document.writeln(" <div class=\"pswp__share-tooltip\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">"); document.writeln(" <\/button>"); document.writeln(""); document.writeln(" <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">"); document.writeln(" <\/button>"); document.writeln(""); document.writeln(" <div class=\"pswp__caption\">"); document.writeln(" <div class=\"pswp__caption__center\"><\/div>"); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <\/div>"); document.writeln(""); document.writeln(" <\/div>"); document.writeln(""); document.writeln("<\/div>");(function() {var initPhotoSwipeFromDOM = function(gallerySelector) {var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],el,childElements,thumbnailEl,size,item;for(var i = 0; i < numNodes; i++) {el = thumbElements[i];// include only element nodesif(el.nodeType !== 1) {continue;}childElements = el.children;size = el.getAttribute('data-size').split('x');// create slide objectitem = {src: el.getAttribute('href'),w: parseInt(size[0], 10),h: parseInt(size[1], 10),author: el.getAttribute('data-author')};item.el = el; // save link to element for getThumbBoundsFnif(childElements.length > 0) {item.msrc = childElements[0].getAttribute('src'); // thumbnail urlif(childElements.length > 1) {item.title = childElements[1].innerHTML; // caption (contents of figure)}}var mediumSrc = el.getAttribute('data-med');if(mediumSrc) {size = el.getAttribute('data-med-size').split('x');// "medium-sized" imageitem.m = {src: mediumSrc,w: parseInt(size[0], 10),h: parseInt(size[1], 10)};}// original imageitem.o = {src: item.src,w: item.w,h: item.h};items.push(item);}return items;};// find nearest parent elementvar 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 === 'A';});if(!clickedListItem) {return;}var clickedGallery = clickedListItem.parentNode;var 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) { // pid=1return 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);// define options (if needed)options = {galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options->getThumbBoundsFn section of docs for more infovar thumbnail = items[index].el.children[0],pageYScroll = window.pageYOffset || document.documentElement.scrollTop,rect = thumbnail.getBoundingClientRect();return {x:rect.left, y:rect.top + pageYScroll, w:rect.width};},addCaptionHTMLFn: function(item, captionEl, isFake) {if(!item.title) {captionEl.children[0].innerText = '';return false;}captionEl.children[0].innerHTML = item.title + '<br/><small>Photo: ' + item.author + '</small>';return true;}};// options for control baroptions.shareEl = false;options.fullscreenEl = false;if(fromURL) {if(options.galleryPIDs) {// parse real index when custom PIDs are used// http://photoswipe.com/documentation/faq.html#custom-pid-in-urlfor(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);}// exit if index not foundif( isNaN(options.index) ) {return;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);// see: http://photoswipe.com/documentation/responsive-images.htmlvar realViewportWidth,useLargeImages = false,firstResize = true,imageSrcWillChange;gallery.listen('beforeResize', function() {var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1;dpiRatio = Math.min(dpiRatio, 2.5);realViewportWidth = gallery.viewportSize.x * dpiRatio;if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) {if(!useLargeImages) {useLargeImages = true;imageSrcWillChange = true;}} else {if(useLargeImages) {useLargeImages = false;imageSrcWillChange = true;}}if(imageSrcWillChange && !firstResize) {gallery.invalidateCurrItems();}if(firstResize) {firstResize = false;}imageSrcWillChange = false;});gallery.listen('gettingData', function(index, item) {if( useLargeImages ) {item.src = item.o.src;item.w = item.o.w;item.h = item.o.h;} else {item.src = item.m.src;item.w = item.m.w;item.h = item.m.h;}});gallery.init();};// select all gallery elementsvar 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;}// Parse URL and open gallery if it contains #&pid=3&gid=1var hashData = photoswipeParseHash();if(hashData.pid && hashData.gid) {openPhotoSwipe( hashData.pid, galleryElements[ hashData.gid - 1 ], true, true );}};initPhotoSwipeFromDOM('.demo-gallery');})();

總結

以上是生活随笔為你收集整理的PhotoSwipe 滑动浏览图片插件使用方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。