photoSwipe-前端画廊js插件

Snipaste_2019-07-11_09-46-51.png

github地址：https://github.com/dimsemenov/photoswipe

文档地址：https://photoswipe.com/documentation/getting-started.html

Snipaste_2019-07-11_09-07-38.png

近2万的star，绝对可用

1. 安装

# npm安装
npm i photoswipe

或者

# git安装
git clone https://github.com/dimsemenov/PhotoSwipe.git

2. 使用

• 引入css，js

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

• 在页面上增加html片段

<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="pswp__bg"></div>
    <div class="pswp__scroll-wrap">
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>
        <div class="pswp__ui pswp__ui--hidden">
            <div class="pswp__top-bar">
                <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>
                <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>

• 初始化和显示画廊

var pswpElement = document.querySelectorAll('.pswp')[0];
var items = [
    {
        src: 'https://placekitten.com/600/400',
        w: 600,
        h: 400
    },
    {
        src: 'https://placekitten.com/1200/900',
        w: 1200,
        h: 900
    }
];
var options = {
    index: 0
};
var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

3. 配合jquery简单封装

图片不是一成不变的，可能会随着条件动态刷新。我们希望点击图片以后展示图片画廊，并且定位到具体点击的那一副照片。假设要显示的图片的class是showImg

$(function() {
    //给.showImg注册点击事件，并且未来元素也会注册事件（新增加的dom元素也有效果，见jquery事件绑定）
    $("body").on("click", ".showImg", function() {
        var index = $(".showImg").index(this);//获取点击图片在所有要显示图片里面的位置
        var items = [];//将图片列表处理封装成photoSwipe需要的items的格式
        $(".showImg").each(function(index, value) {
            items.push({
                src: $(value).prop("src"),
                w: 600,
                h: 600,
                title: $(value).prop("title")
            });
        });
        console.log(items);
        openGallary(items, index);
    });
});
//打开画廊
function openGallary(items, index) {
    var pswpElement = document.querySelectorAll(".pswp")[0];
    var items = items;
    var options = {
        index: index,
        fullscreenEl: false,//不显示全屏
        shareEl: false//不显示分享
    };
    var gallery = new PhotoSwipe(
        pswpElement,
        PhotoSwipeUI_Default,
        items,
        options
    );
    gallery.init();
}

4. 抽出多余的部分，再次封装

把每次都要重复的代码封装到一个js文件中（my-photoSwipe.js）

• 增加css,js
• 增加html片段
• 注册图片点击事件

这样别的功能需要使用画廊插件直接引入my-photoSwipe.js，不需要做任何操作。

这样做的好处是简单，能批量化使用，要修改统一修改。坏处就是个性化配置困难了。

var photoSwipePath = __CreateJSPath("my-photoSwipe.js");
photoSwipePath = photoSwipePath.substring(0, photoSwipePath.length - 1);

document.write(
  '<link rel="stylesheet" href="' + photoSwipePath + '/photoswipe.css" />'
);

document.write(
  '<link rel="stylesheet" href="' +
    photoSwipePath +
    '/default-skin/default-skin.css" />'
);

document.write(
  '<script src="' +
    photoSwipePath +
    '/photoswipe.min.js" type="text/javascript" ></script>'
);

document.write(
  '<script src="' +
    photoSwipePath +
    '/photoswipe-ui-default.min.js" type="text/javascript" ></script>'
);

//打开画廊
function openGallary(items, index) {
  var pswpElement = document.querySelectorAll(".pswp")[0];
  // build items array
  var items = items;
  // define options (if needed)
  var options = {
    // optionName: 'option value'
    // for example:
    index: index, // start at first slide
    fullscreenEl: false,
    shareEl: false
  };
  // Initializes and opens PhotoSwipe
  var gallery = new PhotoSwipe(
    pswpElement,
    PhotoSwipeUI_Default,
    items,
    options
  );
  gallery.init();
}

function addGallaryDom() {
  if ($(".pswp").length > 0) return;
  html =
    ' <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">' +
    '   <div class="pswp__bg"></div>' +
    '   <div class="pswp__scroll-wrap">' +
    '     <div class="pswp__container">' +
    '       <div class="pswp__item"></div>' +
    '       <div class="pswp__item"></div>' +
    '       <div class="pswp__item"></div>' +
    "     </div>" +
    '     <div class="pswp__ui pswp__ui--hidden">' +
    '       <div class="pswp__top-bar">' +
    '         <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>" +
    '         <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>";
  $("body").append(html);
}

function __CreateJSPath(js) {
  var scripts = document.getElementsByTagName("script");
  var path = "";
  for (var i = 0, l = scripts.length; i < l; i++) {
    var src = scripts[i].src;
    if (src.indexOf(js) != -1) {
      var ss = src.split(js);
      path = ss[0];
      break;
    }
  }
  var href = location.href;
  href = href.split("#")[0];
  href = href.split("?")[0];
  var ss = href.split("/");
  ss.length = ss.length - 1;
  href = ss.join("/");
  if (
    path.indexOf("https:") == -1 &&
    path.indexOf("http:") == -1 &&
    path.indexOf("file:") == -1 &&
    path.indexOf("/") != 0
  ) {
    path = href + "/" + path;
  }
  return path;
}

$(function() {
  addGallaryDom();
  $("body").on("click", ".showImg", function() {
    var index = $(".showImg").index(this);
    console.log(index);
    var items = [];
    $(".showImg").each(function(index, value) {
      items.push({
        src: $(value).prop("src"),
        w: 600,
        h: 600,
        title: $(value).prop("title")
      });
    });
    console.log(items);
    openGallary(items, index);
  });
});