如何在WordPress（Elementor）中用普通文本超链接调用灯箱？

方法一：Elementor原生实现（无需插件） #

1. 添加隐藏图片模块
   • 在Elementor编辑器中插入图片模块，上传你要在灯箱展示的图片。
   • 进入该模块的「高级」标签，在「CSS类」中输入hidden-lightbox-img，然后添加自定义CSS隐藏它：

     .hidden-lightbox-img {
         display: none !important;
     }
     

2. 编辑段落中的超链接
   • 选中段落里的目标文本，添加超链接，将href设为#，给链接添加自定义CSS类trigger-lightbox。
   • 打开链接的「自定义属性」，添加data-elementor-lightbox="true"，同时添加data-lightbox-slug属性，值设置为你上传图片的媒体文件slug（可在WordPress媒体库中查看）。

方法二：自定义JS+CSS实现 #

1. 修改段落链接代码
   • 在Elementor文本编辑器中切换到「代码编辑」模式，给目标超链接添加类名和图片地址属性：

     <a href="#" class="lightbox-trigger" data-img="https://你的图片完整地址.jpg">eiusmod tempor</a>
     

2. 添加自定义JS代码
   • 进入Elementor「自定义代码」页面，新建JS代码块（位置选「页脚」），粘贴以下代码：

     document.addEventListener('DOMContentLoaded', () => {
         document.querySelectorAll('.lightbox-trigger').forEach(link => {
             link.addEventListener('click', e => {
                 e.preventDefault();
                 const imgUrl = link.getAttribute('data-img');
                 // 创建灯箱元素
                 const lightbox = document.createElement('div');
                 lightbox.className = 'custom-lightbox';
                 lightbox.innerHTML = `
                     <div class="lightbox-overlay"></div>
                     <div class="lightbox-inner">
                         <img src="${imgUrl}" alt="灯箱图片">
                         <button class="lightbox-close">×</button>
                     </div>
                 `;
                 document.body.appendChild(lightbox);
                 // 关闭灯箱逻辑
                 const close = () => lightbox.remove();
                 lightbox.querySelector('.lightbox-close').addEventListener('click', close);
                 lightbox.querySelector('.lightbox-overlay').addEventListener('click', close);
                 document.addEventListener('keydown', e => e.key === 'Escape' && close());
             });
         });
     });
     

3. 添加自定义CSS美化
   • 新建CSS代码块（位置选「页眉」），粘贴样式：

     .custom-lightbox {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 9999;
         display: flex;
         align-items: center;
         justify-content: center;
     }
     .lightbox-overlay {
         position: absolute;
         width: 100%;
         height: 100%;
         background: rgba(0,0,0,0.8);
     }
     .lightbox-inner {
         position: relative;
         max-width: 90%;
         max-height: 90%;
     }
     .lightbox-inner img {
         width: 100%;
         height: auto;
         border-radius: 4px;
     }
     .lightbox-close {
         position: absolute;
         top: -40px;
         right: 0;
         border: none;
         background: transparent;
         color: #fff;
         font-size: 32px;
         cursor: pointer;
     }
     

方法三：使用Elementor扩展插件 #

• 若使用Elementor Pro，编辑超链接时，在「链接选项」里选择「打开灯箱」，再选择对应的媒体图片即可。
• 免费版可安装「Elementor Lightbox」类插件，激活后给段落链接添加插件指定的类名（比如elementor-lightbox），就能触发灯箱。

内容的提问来源于stack exchange，提问作者42piratas