Elementor图片轮播点击跳转媒体URL：如何直接打开Lightbox？

我的WordPress网站使用Blocksy主题搭配Elementor图片轮播，已设置图片选项：

• 链接：媒体文件
• Lightbox：开启

但点击图片时会先跳转到/wp-content/uploads/image路径，返回后才显示Elementor默认全屏Lightbox。希望点击图片直接打开Lightbox而非跳转，尝试过一段jQuery代码但无效，也可更换支持点击全屏看图的免费轮播插件，求解决方法。

尝试的jQuery代码：

jQuery(document).ready(function($) {
    // Ensure the script runs after the DOM is fully loaded
    $('.carousel a').on('click', function(e) {
        e.preventDefault(); // Prevent the default link behavior

        // Get the href attribute of the clicked link
        var href = $(this).attr('href');

        // Ensure the lightbox plugin is available and has a method to open images
        if (typeof $.featherlight === 'function') {
            $.featherlight(href); // Open the lightbox (replace with the correct method if using another plugin)
        } else {
            console.error('Featherlight plugin is not loaded or available.');
        }
    });
});

方案一：修复Elementor轮播的跳转问题 #

你之前的代码无效，核心原因是选择器不匹配、调用了错误的Lightbox方法，或者代码执行时机不对，按以下步骤调整：

1. 修正选择器与Lightbox调用逻辑
   Elementor图片轮播的链接元素有专属类名，且需调用Elementor原生的Lightbox方法，替换代码为：

jQuery(document).ready(function($) {
    // 精准定位Elementor轮播的图片链接
    $('.elementor-widget-image-carousel .elementor-image-carousel a').on('click', function(e) {
        e.preventDefault(); // 阻止默认跳转
        e.stopPropagation(); // 避免事件冒泡干扰
        
        const imgUrl = $(this).attr('href');
        // 触发Elementor自带的Lightbox
        if (window.elementorFrontend?.utils?.lightbox) {
            window.elementorFrontend.utils.lightbox.open({
                items: [{
                    src: imgUrl,
                    type: 'image'
                }]
            });
        }
    });
});

2. 确保代码在Elementor之后加载

• 将代码保存为fix-carousel-lightbox.js，放在子主题的js目录下，然后在主题functions.php中添加：

function fix_elementor_carousel_lightbox() {
    wp_enqueue_script(
        'fix-carousel-lightbox',
        get_stylesheet_directory_uri() . '/js/fix-carousel-lightbox.js',
        array('jquery', 'elementor-frontend'), // 依赖Elementor前端脚本
        '1.0',
        true // 在页面底部加载
    );
}
add_action('wp_enqueue_scripts', 'fix_elementor_carousel_lightbox');

• 或者直接在Elementor的「自定义HTML」模块中插入代码，勾选「在页面底部加载」选项。

3. 排查冲突

• 临时切换到WordPress默认主题（如Twenty Twenty-Four）测试，确认是否是Blocksy主题的JS干扰了Elementor逻辑。
• 禁用其他第三方插件，逐一排查是否有插件覆盖了链接点击事件。

方案二：更换免费轮播插件 #

如果不想折腾代码，直接选择自带原生Lightbox支持的免费插件：

• MetaSlider：支持多种轮播样式，设置面板可直接开启「点击图片打开Lightbox」，兼容Blocksy主题，轻量无冗余。
• Smart Slider 3 Free：可视化编辑的多功能轮播插件，内置Lightbox选项，支持自定义触发逻辑，适配各类主题。
• WP Carousel Free：轻量级基础轮播工具，默认支持点击图片打开全屏Lightbox，设置简单易上手。

内容的提问来源于stack exchange，提问作者Shrikar Kalagi