使用PhotoSwipe-master实现相册功能

来源：互联网发布：mac南瓜色口红是几号编辑：程序博客网时间：2024/05/15 14:33

目的：本文主要介绍如何使用photoSwipe-master实现相册功能

1、引入相关css和js

这些文件可以上PhotoSwipe-master的官网下载：http://photoswipe.com/

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

2、在自己的html中添加一下代码

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

3、添加js

function openPhotoSwipe() {    var pswpElement = document.querySelectorAll('.pswp')[0];    // build items array    var items = [        {            src: 'timg1.jpg',            w: 1200,            h: 700        },        {            src: 'timg2.jpg',            w: 1200,            h: 700        },{            src: 'timg3.jpg',            w: 1200,            h: 700        }    ];    // 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();document.getElementById('btn').onclick = openPhotoSwipe;

到此就可以实现相册的功能了。

下面附上附上一个实例：

代码:

<html><head><link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/photoswipe.css"><link rel="stylesheet prefetch" href="../PhotoSwipe-master/dist/default-skin/default-skin.css"><script src="../PhotoSwipe-master/dist/photoswipe.min.js"></script><script src="../PhotoSwipe-master/dist/photoswipe-ui-default.min.js"></script><script src="jquery-1.9.1.min.js"></script></head><body><div class="imgs"><img src="timg1.jpg" width="500" height="300"/><img src="timg2.jpg" width="500" height="300"/><img src="timg3.jpg" width="500" height="300"/></div><!--添加PhotoSwipe的dom结构--><!-- 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 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><script>/**打开相册@param items 图片数组@param index 当前点击图片索引*/function openPhotoSwipe(items,index) {    var pswpElement = document.querySelectorAll('.pswp')[0];    // define options (if needed)    var options = {             // history & focus options are disabled on CodePen                history: false,        focus: false,index: index,        showAnimationDuration: 0,        hideAnimationDuration: 0    };    var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);    gallery.init();};/**点击图片，打开相册*/$(".imgs img").click(function(){var items = [];$(".imgs img").each(function(){var item = {src:$(this).attr("src"),w: 1200,h: 700};items.push(item);});var index=$(this).index();openPhotoSwipe(items,index);});</script></body></html>

运行效果：

相册效果：

阅读全文

0 0