https://www.wenweipo.com/static/wenweipo/commons/js/ImagePreview.js

1//图片预览封装
2//给父容器设置id为gallery-lightbox，引入photoswipe.css、previewImg.js、jq即可
3import PhotoSwipeLightbox from "https://wwp-static.wenweipo.com/galleryTemple/photoswipe-lightbox.esm.min.js"
4
5const initPswp = function (dom, wrapper) {
6  const $imgList = dom;
7  for (let i = 0; i < $imgList.length; i++) {
8    const $imgEq = $imgList.eq(i);
9    if($imgEq.parent().is("a")){
10      continue;
11    }
12    const $imgEq0 = $imgEq[0]
13    const imgEqTitle = $imgEq0.getAttribute('title')
14    const figcaptionText = $imgEq.siblings("figcaption").text()
15    const realTitle = imgEqTitle || figcaptionText || ""
16
17    const $a = $(
18      `<a
19        target='_blank'
20        class='gallery-lightbox-preview'
21        href='${$imgEq.attr("src")}'
22        style='cursor: zoom-in'
23        data-pswp-width='${$imgEq0.naturalWidth}'
24        data-pswp-height='${$imgEq0.naturalHeight}'
25        data-pswp-title='${realTitle}'>
26      </a>`
27    )
28    $imgEq.on("load", function (e) {
29      $(this).parent(".gallery-lightbox-preview").attr({
30        "data-pswp-width": e.target.naturalWidth,
31        "data-pswp-height": e.target.naturalHeight
32      })
33    })
34      .after($a)
35      .appendTo($a)
36  }
37  const backEasing = {
38    in: 'cubic-bezier(0.6, -0.28, 0.7, 1)',
39    out: 'cubic-bezier(0.3, 0, 0.32, 1.275)',
40    inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
41  }
42  const options = {
43    gallery: wrapper,
44    children: 'a.gallery-lightbox-preview',
45    showHideAnimationType: 'zoom',
46    showAnimationDuration: 500,
47    hideAnimationDuration: 500,
48    imageClickAction: "zoom",
49    initialZoomLevel: "fit",
50    secondaryZoomLevel: 1.5,
51    preload: [1, 1],
52    maxZoomLevel: 4,
53      pswpModule: () => import("https://wwp-static.wenweipo.com/galleryTemple/photoswipe.esm.min.js"),
54  }
55  const lightbox = new PhotoSwipeLightbox(options)
56  lightbox.on('firstUpdate', () => {
57    lightbox.pswp.options.easing = backEasing.out;
58  });
59  lightbox.on('initialZoomInEnd', () => {
60    $("body").css("overflow", "hidden")
61    lightbox.pswp.options.easing = backEasing.inOut;
62  });
63  lightbox.on('close', () => {
64    lightbox.pswp.options.easing = backEasing.in;
65    $("body").css("overflow", "unset")
66  });
67  lightbox.on('uiRegister', function () {
68    lightbox.pswp.ui.registerElement({
69      name: 'custom-caption',
70      order: 9,
71      isButton: false,
72      appendTo: 'root',
73      html: 'Caption text',
74      onInit: (el, pswp) => {
75        lightbox.pswp.on('change', () => {
76          const dataPswpTitle = lightbox.pswp.currSlide.data.element.getAttribute("data-pswp-title")
77
78          if (dataPswpTitle) {
79            el.innerHTML = dataPswpTitle
80            el.style["display"] = "block"
81            return
82          }
83          el.style["display"] = "none"
84        });
85      }
86    });
87  });
88  lightbox.init();
89  for (let i = 0; i < $(".gallery-lightbox-preview").length; i++) {
90    var str = $($(".gallery-lightbox-preview")[i]).attr("href");
91    var newStr = str.split("?")
92    var newStr0 = newStr[0];
93    $($(".gallery-lightbox-preview")[i]).attr("href", newStr0);
94  }
95}
96
97export default initPswp