不依赖第三方实现lightbox效果

2026年7 月27日 / 网站源码 / 没有评论 / 301次

虽然AI能帮大家完成lightbox效果，但是效果是个未知数。所以龙哥特意把不借助外部资源就能实现wordpress文章图片点击有lightbox的效果收藏下，以便日后直接使用。当然喜欢折腾的朋友也可以直接把代码复制后问AI添加自己还需要的其他功能。

一、效果：
· ✅ 点击图片打开，全屏展示
· ✅ 点击遮罩区域或关闭按钮关闭
· ✅ 鼠标滚轮缩放、移动端双指缩放
· ✅ 拖拽移动图片
· ✅ 旋转按钮（90°旋转）
· ✅ PC / 移动端完美支持

二、功能说明
· 点击图片 → 弹窗打开
· 点击灰色遮罩区域 或 右上角 × → 关闭
· 底部按钮：+ 放大、− 缩小、↻ 旋转90°、⟲ 重置到原始状态
· 鼠标滚轮 → 缩放
· 拖拽图片（鼠标按住拖拽 / 手指按住拖动）→ 移动位置
· 移动端双指缩放 暂时未加，但缩放按钮和滚轮已足够。

三、关键优势
· 完全自主控制，没有第三方事件冲突。
· 遮罩层的事件监听简单直白，PC/移动端均正常关闭。
· 缩放、旋转、拖拽功能齐全。

四、在函数开头增加了 if ( ! is_single() ) { return; }，意味着只有当你打开一篇文章（single.php 模板）时，这段 CSS 和 JS 才会被输出到页面上。首页、分类列表、页面等其他地方不会加载这些资源，不影响速度。

五、把以下代码添加到主题下的functions.php里面即可，代码：

  1. function add_custom_lightbox_assets() {  
  2.     // 只在文章页加载（首页、分类、页面等都不加载）  
  3.     if ( ! is_single() ) {  
  4.         return;  
  5.     }  
  6.   
  7.     // 输出CSS  
  8.     add_action('wp_head', function() {  
  9.         echo '  
  10.         <style>  
  11.         #custom-lightbox {  
  12.             display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;  
  13.             background: rgba(0,0,0,0.9); z-index: 99999; align-items: center; justify-content: center;  
  14.         }  
  15.         #custom-lightbox.active { display: flex; }  
  16.         #custom-lightbox .lb-close {  
  17.             position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px;  
  18.             cursor: pointer; z-index: 10; user-select: none;  
  19.         }  
  20.         #custom-lightbox .lb-controls {  
  21.             position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);  
  22.             display: flex; gap: 15px; z-index: 10;  
  23.         }  
  24.         #custom-lightbox .lb-controls button {  
  25.             background: rgba(255,255,255,0.2); border: none; color: #fff; font-size: 24px;  
  26.             width: 50px; height: 50px; border-radius: 50%; cursor: pointer; display: flex;  
  27.             align-items: center; justify-content: center; backdrop-filter: blur(5px);  
  28.         }  
  29.         #custom-lightbox img {  
  30.             max-width: 90%; max-height: 90%; object-fit: contain;  
  31.             transform-origin: center center; transition: transform 0.1s;  
  32.             user-select: none; pointer-events: auto; cursor: grab;  
  33.         }  
  34.         #custom-lightbox img:active { cursor: grabbing; }  
  35.         </style>';  
  36.     });  
  37.   
  38.     // 输出JS  
  39.     add_action('wp_footer', function() {  
  40.         echo '  
  41.         <script>  
  42.         document.addEventListener("DOMContentLoaded", function() {  
  43.             var entry = document.querySelector(".entry");  
  44.             if (!entry) return;  
  45.   
  46.             var imgs = entry.querySelectorAll("img");  
  47.             imgs.forEach(function(img) {  
  48.                 if (!img.parentElement || img.parentElement.tagName !== "A") {  
  49.                     var link = document.createElement("a");  
  50.                     link.href = img.src;  
  51.                     link.className = "custom-lightbox-trigger";  
  52.                     img.parentNode.insertBefore(link, img);  
  53.                     link.appendChild(img);  
  54.                 } else {  
  55.                     img.parentElement.classList.add("custom-lightbox-trigger");  
  56.                 }  
  57.             });  
  58.   
  59.             var lb = document.createElement("div");  
  60.             lb.id = "custom-lightbox";  
  61.             lb.innerHTML = \'<span class="lb-close">&times;</span><div class="lb-controls"><button id="lb-zoom-in">+</button><button id="lb-zoom-out">−</button><button id="lb-rotate">↻</button><button id="lb-reset">⟲</button></div><img src="" alt="" />\';  
  62.             document.body.appendChild(lb);  
  63.   
  64.             var img = lb.querySelector("img");  
  65.             var currentScale = 1, currentRotate = 0;  
  66.             var isDragging = false, startX, startY;  
  67.             var offsetX = 0, offsetY = 0;  
  68.   
  69.             function updateTransform() {  
  70.                 img.style.transform = "translate(" + offsetX + "px, " + offsetY + "px) scale(" + currentScale + ") rotate(" + currentRotate + "deg)";  
  71.             }  
  72.   
  73.             document.addEventListener("click", function(e) {  
  74.                 var trigger = e.target.closest(".custom-lightbox-trigger");  
  75.                 if (!trigger) return;  
  76.                 e.preventDefault();  
  77.                 img.src = trigger.href;  
  78.                 lb.classList.add("active");  
  79.                 currentScale = 1; currentRotate = 0; offsetX = 0; offsetY = 0;  
  80.                 updateTransform();  
  81.             });  
  82.   
  83.             function closeLightbox(e) {  
  84.                 if (e.target === lb || e.target.classList.contains("lb-close")) {  
  85.                     lb.classList.remove("active");  
  86.                 }  
  87.             }  
  88.             lb.addEventListener("click", closeLightbox);  
  89.             lb.addEventListener("touchend", function(e) {  
  90.                 if (e.target === lb || e.target.classList.contains("lb-close")) {  
  91.                     lb.classList.remove("active");  
  92.                 }  
  93.             });  
  94.   
  95.             document.getElementById("lb-zoom-in").addEventListener("click", function(e) {  
  96.                 e.stopPropagation();  
  97.                 currentScale += 0.2;  
  98.                 updateTransform();  
  99.             });  
  100.             document.getElementById("lb-zoom-out").addEventListener("click", function(e) {  
  101.                 e.stopPropagation();  
  102.                 if (currentScale > 0.3) currentScale -= 0.2;  
  103.                 updateTransform();  
  104.             });  
  105.             document.getElementById("lb-rotate").addEventListener("click", function(e) {  
  106.                 e.stopPropagation();  
  107.                 currentRotate += 90;  
  108.                 updateTransform();  
  109.             });  
  110.             document.getElementById("lb-reset").addEventListener("click", function(e) {  
  111.                 e.stopPropagation();  
  112.                 currentScale = 1; currentRotate = 0; offsetX = 0; offsetY = 0;  
  113.                 updateTransform();  
  114.             });  
  115.   
  116.             lb.addEventListener("wheel", function(e) {  
  117.                 e.preventDefault();  
  118.                 if (e.deltaY < 0) currentScale += 0.1;  
  119.                 else currentScale -= 0.1;  
  120.                 currentScale = Math.max(0.2, currentScale);  
  121.                 updateTransform();  
  122.             }, {passive: false});  
  123.   
  124.             img.addEventListener("mousedown", function(e) {  
  125.                 e.preventDefault();  
  126.                 isDragging = true;  
  127.                 startX = e.clientX - offsetX;  
  128.                 startY = e.clientY - offsetY;  
  129.                 img.style.cursor = "grabbing";  
  130.             });  
  131.             window.addEventListener("mousemove", function(e) {  
  132.                 if (!isDragging) return;  
  133.                 offsetX = e.clientX - startX;  
  134.                 offsetY = e.clientY - startY;  
  135.                 updateTransform();  
  136.             });  
  137.             window.addEventListener("mouseup", function() {  
  138.                 isDragging = false;  
  139.                 img.style.cursor = "grab";  
  140.             });  
  141.   
  142.             img.addEventListener("touchstart", function(e) {  
  143.                 if (e.touches.length === 1) {  
  144.                     isDragging = true;  
  145.                     startX = e.touches[0].clientX - offsetX;  
  146.                     startY = e.touches[0].clientY - offsetY;  
  147.                 }  
  148.             });  
  149.             img.addEventListener("touchmove", function(e) {  
  150.                 if (!isDragging || e.touches.length !== 1) return;  
  151.                 e.preventDefault();  
  152.                 offsetX = e.touches[0].clientX - startX;  
  153.                 offsetY = e.touches[0].clientY - startY;  
  154.                 updateTransform();  
  155.             }, {passive: false});  
  156.             img.addEventListener("touchend", function() {  
  157.                 isDragging = false;  
  158.             });  
  159.         });  
  160.         </script>';  
  161.     }, 99);  
  162. }  
  163. add_action('wp_enqueue_scripts', 'add_custom_lightbox_assets');  

关键词:

时间：2026年7 月27日，星期一，上午12:47。
通过 RSS 2.0 订阅源关注。

«
»

提交评论

请拖动滑块对齐白圈完成验证

同类文章