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

2018-03-02 08:27:00来源:cnblogs.com作者:叶超Luka人点击

分享

前言:

考虑自己网站的图片展示,而且要支持移动端和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


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

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

相关文章

    无相关信息

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台