https://takungpao.com/static/tkwwtemplate/js/photoSwipe/previewImg.js?template=202512311426

1//图片预览封装
2//给父容器设置id为gallery-lightbox，引入photoswipe.css、previewImg.js、jq即可
3import PhotoSwipeLightbox from "./photoswipe-lightbox.esm.min.js?template=20230313"
4import Util from "../utils/util.js?template=20230313"
5/*
6	previewImgClassStr:选择器
7*/
8let previewImgClassStr = "#gallery-lightbox"
9let isInitPswp = "true"//刷新時是否運行
10function initPreviewImgParams(){
11  var $previewImgJs = $("#previewImgJs")
12  if($previewImgJs===null)return
13  if(typeof $previewImgJs.attr("previewImgClassStr") !== 'undefined'){
14    previewImgClassStr = $previewImgJs.attr("previewImgClassStr")
15  }
16  if(typeof $previewImgJs.attr("isInitPswp") !== 'undefined'){
17    isInitPswp = $previewImgJs.attr("isInitPswp")
18  }
19}
20window.initPswp = function(classStr=""){
21  let imgStr = `${previewImgClassStr} img`
22  if(classStr!==""){
23    imgStr = classStr
24  }
25  var $imgList = $(imgStr)
26  for(let i = 0;i<$imgList.length;i++){
27    var $imgEq = $imgList.eq(i)
28    if ($imgEq.parent('a').length > 0||Util.isNull($imgEq.attr("src"))) {
29      continue;
30    }
31    var $imgEq0 = $imgEq[0]
32    var $a = $(
33      "<a"+
34      " target='_blank'"+
35      " class='gallery-lightbox-preview'"+
36      " href="+$imgEq.attr("src")+""+
37      " style='cursor: zoom-in'" +
38      " data-pswp-width="+$imgEq0.naturalWidth+""+
39      " data-pswp-height="+$imgEq0.naturalHeight+""+
40      " data-pswp-title='"+$imgEq.siblings("figcaption").text()+"'"+
41      " >"+
42      "</a>"
43    )
44    $imgEq.on("load",function(e){
45      $(this).parent(".gallery-lightbox-preview").attr({
46        "data-pswp-width":e.target.naturalWidth,
47        "data-pswp-height":e.target.naturalHeight
48      })
49    })
50    .after($a)
51    .appendTo($a)
52  }
53  const backEasing = {
54    in: 'cubic-bezier(0.6, -0.28, 0.7, 1)',
55    out: 'cubic-bezier(0.3, 0, 0.32, 1.275)',
56    inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
57  }
58  const options = {
59    gallery: previewImgClassStr,
60    children: 'a.gallery-lightbox-preview',
61    showHideAnimationType: 'zoom',
62    showAnimationDuration: 500,
63    hideAnimationDuration: 500,
64    imageClickAction:"zoom",
65    initialZoomLevel: "fit",
66    secondaryZoomLevel: 1.5,
67    maxZoomLevel: 4,
68    pswpModule: ()=>import("./photoswipe.esm.min.js?template=20230313"),
69}
70    const lightbox = new PhotoSwipeLightbox(options)
71    lightbox.on('firstUpdate', () => {
72    lightbox.pswp.options.easing = backEasing.out;
73});
74    lightbox.on('initialZoomInEnd', () => {
75    lightbox.pswp.options.easing = backEasing.inOut;
76});
77    lightbox.on('close', () => {
78    lightbox.pswp.options.easing = backEasing.in;
79});
80    lightbox.on('uiRegister', function() {
81    lightbox.pswp.ui.registerElement({
82    name: 'custom-caption',
83      order: 9,
84        isButton: false,
85          appendTo: 'root',
86            html: 'Caption text',
87              onInit: (el, pswp) => {
88                lightbox.pswp.on('change', () => {
89                  const dataPswpTitle = lightbox.pswp.currSlide.data.element.getAttribute("data-pswp-title")
90                  if(dataPswpTitle){
91                    el.innerHTML = dataPswpTitle
92                    el.style["display"] = "block"
93                    return
94                  }
95                  el.style["display"] = "none"
96                });
97              }
98});
99});
100lightbox.init()
101}
102window.initCommonPswp = function(classStr=""){
103  let imgStr = `${previewImgClassStr} img`
104  if(classStr!==""){
105    imgStr = classStr
106  }
107  var $imgList = $(imgStr)
108  for(let i = 0;i<$imgList.length;i++){
109    var $imgEq = $imgList.eq(i)
110    var $imgEq0 = $imgEq[0]
111    var $a = $(
112      "<a"+
113      " target='_blank'"+
114      " class='gallery-lightbox-preview'"+
115      " href="+$imgEq.attr("src")+""+
116      " style='cursor: zoom-in'" +
117      " data-pswp-width="+$imgEq0.naturalWidth+""+
118      " data-pswp-height="+$imgEq0.naturalHeight+""+
119      " data-pswp-title='"+$imgEq.attr("preview-title")+"'"+
120      " >"+
121      "</a>"
122    )
123    $imgEq.on("load",function(e){
124      $(this).parent(".gallery-lightbox-preview").attr({
125        "data-pswp-width":e.target.naturalWidth,
126        "data-pswp-height":e.target.naturalHeight
127      })
128    })
129    .after($a)
130    .appendTo($a)
131  }
132  const backEasing = {
133    in: 'cubic-bezier(0.6, -0.28, 0.7, 1)',
134    out: 'cubic-bezier(0.3, 0, 0.32, 1.275)',
135    inOut: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)'
136  }
137  const options = {
138    gallery: previewImgClassStr,
139    children: 'a.gallery-lightbox-preview',
140    showHideAnimationType: 'zoom',
141    showAnimationDuration: 500,
142    hideAnimationDuration: 500,
143    imageClickAction:"zoom",
144    initialZoomLevel: "fit",
145    secondaryZoomLevel: 1.5,
146    maxZoomLevel: 4,
147    pswpModule: ()=>import("./photoswipe.esm.min.js?template=20230313"),
148}
149    const lightbox = new PhotoSwipeLightbox(options)
150    lightbox.on('firstUpdate', () => {
151    lightbox.pswp.options.easing = backEasing.out;
152});
153    lightbox.on('initialZoomInEnd', () => {
154    lightbox.pswp.options.easing = backEasing.inOut;

155});
156    lightbox.on('close', () => {
157    lightbox.pswp.options.easing = backEasing.in;
158});
159    lightbox.on('uiRegister', function() {
160    lightbox.pswp.ui.registerElement({
161    name: 'custom-caption',
162      order: 9,
163        isButton: false,
164          appendTo: 'root',
165            html: 'Caption text',
166              onInit: (el, pswp) => {
167                lightbox.pswp.on('change', () => {
168                  const dataPswpTitle = lightbox.pswp.currSlide.data.element.getAttribute("data-pswp-title")
169                  if(dataPswpTitle){
170                    el.innerHTML = dataPswpTitle
171                    el.style["display"] = "block"
172                    return
173                  }
174                  el.style["display"] = "none"
175                });
176              }
177});
178});
179lightbox.init()
180}
181$(function(){
182  initPreviewImgParams()
183  if(isInitPswp==="true"){
184    initPswp()
185  }
186})