【JavaScript 插件】图片预览插件 PhotoSwipe 初识

来源:转载

前言:

考虑自己网站的图片展示,而且要支持移动端和PC端。自己写的代码也不尽如意,要写好的话也需要时间,于是就想到了使用相关插件。

准备:

PhotoSwipe 官网地址:http://photoswipe.com/

英语还可以的同学可以看官方文档学习:http://photoswipe.com/documentation/getting-started.html

下载对应的几个CSS、JS文件就可以了:https://github.com/dimsemenov/PhotoSwipe/tree/master/dist

正文:

进入正题,我们先把下载的文件添加到项目里面,然后就可以下面的步骤了。

1.引用JS、CSS文件

<link href="photoswipe.css" rel="stylesheet" /><link href="default-skin/default-skin.css" rel="stylesheet" /><script src="photoswipe.min.js"></script><script src="photoswipe-ui-default.min.js"></script>

2.添加 PhotoSwipe 的图片展示窗口的 HTML 代码

<!-- 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 https://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.初始化

我们先简单的了解下,这个通过 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();

这样简单的效果就出来了。

演示地址:http://www.ycdoit.com/plugins/photoswipe/index1.html

页面源代码:https://github.com/YeXiaoChao/yexiaochao.github.io/blob/master/plugins/PhotoSwipe/index1.html

进阶:

但是如果我们不希望在 JS 设置图片信息,而是直接在 HTML 文件里面生成图片代码,然后点击的时候展示图片。

首先我们要知道, PhotoSwipe 添加自己的属性到这个图片对象的代码如下所示:

var slides = [// slide 1{src: 'path/to/image1.jpg', // path to imagew: 1024, // image widthh: 768, // image heightmsrc: 'path/to/small-image.jpg', // small image placeholder,// main (large) image loads on top of it,// if you skip this parameter - grey rectangle will be displayed,// try to define this property only when small image was loaded beforetitle: 'Image Caption' // used by Default PhotoSwipe UI// if you skip it, there won't be any caption// You may add more properties here and use them.// For example, demo gallery uses "author" property, which is used in the caption.// author: 'John Doe'},// slide 2{src: 'path/to/image2.jpg', w: 600, h: 600// etc.}// etc.];

图片数组列表的HTML代码是这样的:

<div class="my-gallery" itemscope itemtype="http://schema.org/ImageGallery"> <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> </a> <figcaption itemprop="caption description">Image caption</figcaption> </figure> <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject"> <a href="large-image.jpg" itemprop="contentUrl" data-size="600x400"> <img src="small-image.jpg" itemprop="thumbnail" alt="Image description" /> </a> <figcaption itemprop="caption description">Image caption</figcaption> </figure></div>

然后我们通过 JS 把图片属性信息绑定起来:

var initPhotoSwipeFromDOM = function(gallerySelector) { // parse slide data (url, title, size ...) from DOM elements // (children of 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]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; // <a> element size = linkEl.getAttribute('data-size').split('x'); // create slide object item = { src: linkEl.getAttribute('href'), w: parseInt(size[0], 10), h: parseInt(size[1], 10) }; if(figureEl.children.length > 1) { // <figcaption> content item.title = figureEl.children[1].innerHTML; } if(linkEl.children.length > 0) { // <img> thumbnail element, retrieving thumbnail url item.msrc = linkEl.children[0].getAttribute('src'); } item.el = figureEl; // save link to element for getThumbBoundsFn items.push(item); } return items; }; // find nearest parent element var closest = function closest(el, fn) { return el && ( fn(el) ? el : closest(el.parentNode, fn) ); }; // triggers when user clicks on thumbnail 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 slide var 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- attribute 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) { // open PhotoSwipe if valid index found openPhotoSwipe( 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); // define options (if needed) options = { // define gallery index (for URL) galleryUID: galleryElement.getAttribute('data-pswp-uid'), getThumbBoundsFn: function(index) { // See Options -> getThumbBoundsFn section of documentation for more info var thumbnail = items[index].el.getElementsByTagName('img')[0], // find thumbnail pageYScroll = window.pageYOffset || document.documentElement.scrollTop, rect = thumbnail.getBoundingClientRect(); return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; } }; // PhotoSwipe opened from URL if(fromURL) { if(options.galleryPIDs) { // parse real index when custom PIDs are used // http://photoswipe.com/documentation/faq.html#custom-pid-in-url for(var j = 0; j < items.length; j++) { if(items[j].pid == index) { options.index = j; break; } } } else { // in URL indexes start from 1 options.index = parseInt(index, 10) - 1; } } else { options.index = parseInt(index, 10); } // exit if index not found if( isNaN(options.index) ) { return; } if(disableAnimation) { options.showAnimationDuration = 0; } // Pass data to PhotoSwipe and initialize it gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); }; // loop through all gallery elements and bind events 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; } // Parse URL and open gallery if it contains #&pid=3&gid=1 var hashData = photoswipeParseHash(); if(hashData.pid && hashData.gid) { openPhotoSwipe( hashData.pid , galleryElements[ hashData.gid - 1 ], true, true ); }};// execute above functioninitPhotoSwipeFromDOM('.my-gallery');

我们把自己的图片信息根据模板修改下,然后把前面的图片展示代码放在一起就行了。

演示地址:http://www.ycdoit.com/plugins/photoswipe/index2.html

页面源代码:https://github.com/YeXiaoChao/yexiaochao.github.io/blob/master/plugins/PhotoSwipe/index2.html

接着根据自己的页面需求,相对应的修改代码就可以了。

因为并不需要太复杂的功能,解决了自己的问题,就没有继续研究了。需要深入了解的同学,可以看看官方文档。

分享给朋友:
您可能感兴趣的文章:
随机阅读: