PhotoSwipe图片放大查看

发布时间:2026/10/30 4:49:54
PhotoSwipe图片放大查看 !-- 相册 --linkrelstylesheettypetext/csshref__PUBLIC__/photo/photoswipe.min.css/linkrelstylesheettypetext/csshref__PUBLIC__/photo/default-skin.min.css/divclasspswptabindex-1roledialogaria-hiddentruedivclasspswp__bg/divdivclasspswp__scroll-wrapdivclasspswp__containerdivclasspswp__item/divdivclasspswp__item/divdivclasspswp__item/div/divdivclasspswp__ui pswp__ui--hiddendivclasspswp__top-bardivclasspswp__counter/divbuttonclasspswp__button pswp__button--closetitleClose (Esc)/button!--button classpswp__button pswp__button--share titleShare/button--buttonclasspswp__button pswp__button--fstitleToggle fullscreen/buttonbuttonclasspswp__button pswp__button--zoomtitleZoom in/out/buttondivclasspswp__preloaderdivclasspswp__preloader__icndivclasspswp__preloader__cutdivclasspswp__preloader__donut/div/div/div/div/divdivclasspswp__share-modal pswp__share-modal--hidden pswp__single-tapdivclasspswp__share-tooltip/div/divbuttonclasspswp__button pswp__button--arrow--lefttitlePrevious (arrow left)/buttonbuttonclasspswp__button pswp__button--arrow--righttitleNext (arrow right)/buttondivclasspswp__captiondivclasspswp__caption__center/div/div/div/div/divscriptsrc__PUBLIC__/photo/photoswipe.min.jstypetext/javascriptcharsetutf-8/scriptscriptsrc__PUBLIC__/photo/photoswipe-ui-default.min.jstypetext/javascriptcharsetutf-8/scriptscripttypetext/javascript$(function(){layui.use([layer],function(){layerlayui.layer;varinitPhotoSwipeFromDOMfunction(gallerySelector){// 解析来自DOM元素幻灯片数据URL标题大小...varparseThumbnailElementsfunction(el){varthumbElements;if($(el).attr(data-pswp-uid)0){thumbElements$(el).find(img);}else{thumbElements$(el).parents([data-pswp-uid]).find(img);}varnumNodesthumbElements.length,items[],imgEl,linkEl,size,item,divEl;for(vari0;inumNodes;i){imgElthumbElements[i];// figure element// 仅包括元素节点if(imgEl.nodeType!1){continue;}varsrcsimgEl.getAttribute(src);size[imgEl.naturalWidth,imgEl.naturalHeight];// 创建幻灯片对象item{src:srcs,w:parseInt(size[0],10),h:parseInt(size[1],10),};if(imgEl.children.length1){item.titleimgEl.getAttribute(alt);}if(imgEl.children.length0){// img 缩略图节点, 检索缩略图网址item.msrcsrcs;}item.elimgEl;// 保存链接元素 for getThumbBoundsFnitems.push(item);}returnitems;};// 查找最近的父节点varclosestfunctionclosest(el,fn){returnel(fn(el)?el:closest(el.parentNode,fn));};// 当用户点击缩略图触发varonThumbnailsClickfunction(e){ee||window.event;vareTargete.target||e.srcElement;varclickedListItemclosest(eTarget,function(el){returnel.tagNameel.tagName.toUpperCase()IMG;});if(clickedListItem){varclickedGalleryclickedListItem.parentNode,childNodes$(clickedListItem).parents([data-pswp-uid]).find(img),numChildNodeschildNodes.length,nodeIndex0,index;for(vari0;inumChildNodes;i){if(childNodes[i].nodeType!1){continue;}if(childNodes[i]clickedListItem){indexnodeIndex;break;}nodeIndex;}if(index0){openPhotoSwipe(index,clickedGallery);}e.preventDefault?e.preventDefault():(e.returnValuefalse);returnfalse;}// end};varphotoswipeParseHashfunction(){varhashwindow.location.hash.substring(1),params{};if(hash.length5){returnparams;}varvarshash.split();for(vari0;ivars.length;i){if(!vars[i]){continue;}varpairvars[i].split();if(pair.length2){continue;}params[pair[0]]pair[1];}if(params.gid){params.gidparseInt(params.gid,10);}returnparams;};varopenPhotoSwipefunction(index,galleryElement,disableAnimation,fromURL){varpswpElementdocument.querySelectorAll(.pswp)[0],gallery,options,items;itemsparseThumbnailElements(galleryElement);// 这里可以定义参数options{history:false,// 关闭历史记录功能barsSize:{top:100,bottom:100,},fullscreenEl:false,shareButtons:[{id:wechat,label:分享微信,url:#},{id:weibo,label:新浪微博,url:#},{id:download,label:保存图片,url:{{raw_image_url}},download:true,},],galleryUID:galleryElement.getAttribute(data-pswp-uid),getThumbBoundsFn:function(index){varthumbnailitems[index].el,// find thumbnailpageYScrollwindow.pageYOffset||document.documentElement.scrollTop,rectthumbnail.getBoundingClientRect();return{x:rect.left,y:rect.toppageYScroll,w:rect.width};},};if(fromURL){if(options.galleryPIDs){for(varj0;jitems.length;j){if(items[j].pidindex){options.indexj;break;}}}else{options.indexparseInt(index,10)-1;}}else{options.indexparseInt(index,10);}if(isNaN(options.index)){return;}if(disableAnimation){options.showAnimationDuration0;}gallerynewPhotoSwipe(pswpElement,PhotoSwipeUI_Default,items,options);gallery.init();};vargalleryElementsdocument.querySelectorAll(gallerySelector);for(vari0,lgalleryElements.length;il;i){galleryElements[i].setAttribute(data-pswp-uid,i1);galleryElements[i].onclickonThumbnailsClick;}setTimeout(function(){varhashDataphotoswipeParseHash();if(hashData.pidhashData.gid){openPhotoSwipe(hashData.pid,galleryElements[hashData.gid-1],true,true);}elseif(hashData.pidgalleryElements.length0){openPhotoSwipe(hashData.pid,galleryElements[0],true,true);}},1000);};initPhotoSwipeFromDOM(.news_content);});});/script