Fancybox3非画廊模式下导航箭头始终可见及自定义跳转需求

Hey there! I totally get the frustration—most existing resources are built for Fancybox 2, and getting those navigation arrows to work properly in Fancybox 3 (especially when you're not using gallery mode) can feel like hitting a wall. Let's walk through exactly how to make those arrows stay visible at all times and link to your specified previous/next images, like having photo10's left arrow jump straight to photo9.

1. 让导航箭头始终显示 #

By default, Fancybox 3 might hide navigation arrows in single-image mode, or only show them on hover. We'll fix that with a mix of CSS and JS config:

第一步：自定义CSS强制箭头可见 #

Add this to your stylesheet to override Fancybox's default hover-only visibility:

/* 强制导航箭头始终可见，不受hover状态影响 */
.fancybox-navigation .fancybox-button {
    opacity: 1 !important;
    visibility: visible !important;
}

/* 可选：调整箭头位置或样式，根据你的需求修改 */
.fancybox-navigation .fancybox-button--arrow_left {
    left: 20px; /* 左箭头距离左侧的距离 */
}
.fancybox-navigation .fancybox-button--arrow_right {
    right: 20px; /* 右箭头距离右侧的距离 */
}

第二步：初始化Fancybox时启用导航按钮 #

Make sure you explicitly enable the arrow buttons in your Fancybox init code, even for single images:

$('[data-fancybox="single"]').fancybox({
    // 启用需要的按钮：左箭头、右箭头、关闭按钮
    buttons: [
        'arrowLeft',
        'arrowRight',
        'close'
    ],
    // 禁用默认的画廊自动关联（我们要手动控制跳转）
    gallery: {
        enabled: false
    },
    // 可选：如果不需要循环跳转（比如最后一张不回到第一张），设为false
    loop: false
});

2. 自定义箭头跳转逻辑到指定图片 #

Since we're not using gallery mode, Fancybox won't automatically link images together. We'll add custom data attributes to each image and bind click events to the arrows to jump to your targets.

第一步：给图片添加跳转目标属性 #

Add data-prev and data-next attributes to each image link, using valid CSS selectors for your target images:

<!-- 示例：photo10，左箭头指向photo9，右箭头指向photo11 -->
<a href="photo10.jpg" data-fancybox="single" data-prev="#photo9" data-next="#photo11" id="photo10">
    <img src="thumb10.jpg" alt="Photo 10">
</a>

<!-- 对应的photo9，左箭头指向photo8，右箭头指向photo10 -->
<a href="photo9.jpg" data-fancybox="single" data-prev="#photo8" data-next="#photo10" id="photo9">
    <img src="thumb9.jpg" alt="Photo 9">
</a>

第二步：绑定箭头点击事件实现跳转 #

Use Fancybox's afterShow event to attach custom click handlers to the arrows, which will close the current popup and open your specified target:

$('[data-fancybox="single"]').fancybox({
    buttons: [
        'arrowLeft',
        'arrowRight',
        'close'
    ],
    gallery: {
        enabled: false
    },
    loop: false,
    afterShow: function(instance, current) {
        // 获取当前图片的prev/next目标选择器
        const prevTarget = current.opts.$orig.data('prev');
        const nextTarget = current.opts.$orig.data('next');

        // 处理左箭头点击
        instance.$refs.arrowLeft.off('click.fancybox').on('click.fancybox', function(e) {
            e.preventDefault();
            if (prevTarget) {
                // 关闭当前弹窗，触发目标图片的点击事件
                instance.close();
                $(prevTarget).trigger('click');
            }
        });

        // 处理右箭头点击
        instance.$refs.arrowRight.off('click.fancybox').on('click.fancybox', function(e) {
            e.preventDefault();
            if (nextTarget) {
                instance.close();
                $(nextTarget).trigger('click');
            }
        });
    }
});

一些额外提示 #

• Double-check that your data-prev and data-next selectors match the IDs/classes of your target images (use # for IDs, . for classes).
• If you want looped navigation (e.g., last image's right arrow jumps to the first), add logic to fall back to your first/last image when nextTarget/prevTarget is missing.
• The !important in the CSS is to override Fancybox's default hover styles—if your custom styles have higher specificity, you can remove it.

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