一、簡介

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>

3、必要的HTML結構

<div class="repairImgList lightgallery" data-pswp-uid="1" id="PhotoSwipe-demo"><figure><div><a href="http://192.168.0.99:9090/wyglFile/images/overhaul/03d1150a24a74e87ba89f689f1c374a7-20160328110004.jpg" data-size="640x1136"><img src="http://192.168.0.99:9090/wyglFile/images/overhaul/03d1150a24a74e87ba89f689f1c374a7-20160328110004.jpg"></a></div></figure><figure><div><a href="http://192.168.0.99:9090/wyglFile/images/overhaul/03d1150a24a74e87ba89f689f1c374a7-20160328110004.jpg" data-size="640x1136"><img src="http://192.168.0.99:9090/wyglFile/images/overhaul/03d1150a24a74e87ba89f689f1c374a7-20160328110004.jpg"></a></div></figure> </div>

4、必要的啟動代碼

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

這部分代碼是相冊組成的基本代碼，由于PhotoSwipe沒有集成到JS里面，所以需要手動的添加到body內，當然也可以采用JS方式把HTML代碼拼接進去，我這里已經接好了，見下面JS：

var gelleryHtml = ""; gelleryHtml += "<div id='gallery' class='pswp' tabindex='-1' role='dialog' aria-hidden='true'>"; gelleryHtml += "<div class='pswp__bg'></div>"; gelleryHtml += "<div class='pswp__scroll-wrap'>"; gelleryHtml += "<div class='pswp__container'>"; gelleryHtml += "<div class='pswp__item'></div>"; gelleryHtml += "<div class='pswp__item'></div>"; gelleryHtml += "<div class='pswp__item'></div>"; gelleryHtml += "</div>"; gelleryHtml += "<div class='pswp__ui pswp__ui--hidden'>"; gelleryHtml += "<div class='pswp__top-bar'>"; gelleryHtml += "<div class='pswp__counter'></div>"; gelleryHtml += "<button class='pswp__button pswp__button--close' title='Close (Esc)'></button>"; gelleryHtml += "<button class='pswp__button pswp__button--share' title='Share' style='display:none'></button>"; gelleryHtml += "<button class='pswp__button pswp__button--fs' title='Toggle fullscreen'></button>"; gelleryHtml += "<button class='pswp__button pswp__button--zoom' title='Zoom in/out'></button>"; gelleryHtml += "<div class='pswp__preloader'>"; gelleryHtml += "<div class='pswp__preloader__icn'>"; gelleryHtml += "<div class='pswp__preloader__cut'>"; gelleryHtml += "<div class='pswp__preloader__donut'></div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "<div class='pswp__share-modal pswp__share-modal--hidden pswp__single-tap'>"; gelleryHtml += "<div class='pswp__share-tooltip'>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "<button class='pswp__button pswp__button--arrow--left' title='Previous (arrow left)'></button>"; gelleryHtml += "<button class='pswp__button pswp__button--arrow--right' title='Next (arrow right)'></button>"; gelleryHtml += "<div class='pswp__caption'>"; gelleryHtml += "<div class='pswp__caption__center'>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; gelleryHtml += "</div>"; $(function() {$('body').append(gelleryHtml); })

5、最后，加上必要的啟動代碼：

var initPhotoSwipeFromDOM = function(gallerySelector) {// 解析來自DOM元素幻燈片數據（URL，標題，大小...）// (children of gallerySelector)var parseThumbnailElements = function(el) {var thumbElements = el.childNodes,numNodes = thumbElements.length,items = [],figureEl,linkEl,size,item,divEl;for (var i = 0; i < numNodes; i++) {figureEl = thumbElements[i]; // <figure> element// 僅包括元素節點if (figureEl.nodeType !== 1) {continue;}divEl = figureEl.children[0];linkEl = divEl.children[0]; // <a> elementsize = 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) {// <figcaption> contentitem.title = figureEl.children[1].innerHTML;}if (linkEl.children.length > 0) {// <img> 縮略圖節點, 檢索縮略圖網址item.msrc = linkEl.children[0].getAttribute('src');}item.el = figureEl; // 保存鏈接元素 for getThumbBoundsFnitems.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;// find root element of slidevar clickedListItem = closest(eTarget, function(el) {return (el.tagName && el.tagName.toUpperCase() === 'FIGURE');});if (!clickedListItem) {return;}// find index of clicked item by looping through all child nodes// alternatively, you may define index via data- attributevar 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) {// open PhotoSwipe if valid index foundopenPhotoSwipe(index, clickedGallery);}return false;};// parse picture index and gallery index from URL (#&pid=1&gid=2)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 = {barsSize: {top: 100,bottom: 100},fullscreenEl: false,shareButtons: [{id: 'wechat',label: '分享微信',url: '#'}, {id: 'weibo',label: '新浪微博',url: '#'}, {id: 'download',label: '保存圖片',url: '{{raw_image_url}}',download: true}],// define gallery index (for URL)galleryUID: galleryElement.getAttribute('data-pswp-uid'),getThumbBoundsFn: function(index) {// See Options -> getThumbBoundsFn section of documentation for more infovar 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};}};// PhotoSwipe opened from URLif (fromURL) {if (options.galleryPIDs) {// parse real index when custom PIDs are used for (var j = 0; j < items.length; j++) {if (items[j].pid == index) {options.index = j;break;}}} else {// in URL indexes start from 1options.index = parseInt(index, 10) - 1;}} else {options.index = parseInt(index, 10);}// exit if index not foundif (isNaN(options.index)) {return;}if (disableAnimation) {options.showAnimationDuration = 0;}// Pass data to PhotoSwipe and initialize itgallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);gallery.init();};// loop through all gallery elements and bind eventsvar 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);} };

三、DEMO展示及下載

點擊下載

轉載于:https://www.cnblogs.com/jone-chen/p/6108407.html

總結

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

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