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

PhotoSwipe图片放大查看

相关推荐

Top-K知识蒸馏损失实现详解：Qwen3.8-Whittle-MoE-27B-A17.8B 的三元KL分解与248K词表下的显存控制技巧

深度解析Yue2-3B-GGUF的AR+NAR双阶段生成架构：从歌词到48kHz立体声音频的完整链路

【KMP for OpenHarmony】-- Apollo-Kotlin

更多资讯

OneTrans-V2：统一召回与排序的生成式检索架构落地实践

Python根据输入参数计算结果的实例方法

BlueField-4 STX：AI存储加速器的架构革新与应用

无人驾驶自动泊车技术：多项式规划与单步系统优化

标准库中的设计模式活教材

AI如何革新工程管理：从知识图谱到智能决策

今日更新

AI智能体开发实战：从技术原理到商业落地

OpenShell 完全定制指南：从安装到深度配置，打造高效 Windows 开始菜单

Superpowers技能体系全解析：从Skills引入到安装的完整指南

本周精选

防幻觉智能体架构：电源硬件设计中的大模型编排与工具化实践

OpenGL面试核心考点：渲染管线、矩阵变换与性能排查全解析

全国计算机二级C语言真题PDF高效刷题指南

本月热门

我发现了一个新思路：用 Remotion + Claude Code 像写代码一样自动化生成短视频

Windows下 Codex 中 Chrome 和 Computer Use 插件不可用问题排查及解决参考方式：TaoToken 统一 Key 配置与验证

2026 大模型集体涨价：用 Python 做企业 Token 成本测算与选型避坑（附配置）

读完文章，想聊聊您的网站？