如何通过类为WordPress的Fancybox 3每个图库限定专属可浏览图片

核心问题原因 #

你当前的代码给全站所有指向图片的链接都添加了统一的data-fancybox="gallery"属性，fancybox会把所有带有相同data-fancybox属性值的元素归为同一个浏览组，所以才会出现跨图库浏览的问题。

调整后的jQuery代码 #

你只需要按图库为单位设置不同的data-fancybox属性值即可，代码如下（已适配WordPress默认的jQuery noConflict模式）：

jQuery(document).ready(function($) {
  // 把 .single-gallery 替换成你自己给每个图库添加的专属类名
  $('.single-gallery').each(function(index) {
    // 为当前图库生成唯一的分组标识
    const galleryId = `gallery-${index}`;
    // 只给当前图库内的图片链接添加对应分组属性
    $(this).find("a[href$='.jpg'], a[href$='.jpeg'], a[href$='.png'], a[href$='.gif']")
      .attr('data-fancybox', galleryId)
      .fancybox({
        buttons: [
          "zoom",
          //"share",
          //"slideShow",
          "fullScreen",
          //"download",
          //"thumbs", // blendet Buttons für Thumbnails ein
          "close"
        ],
        // 这里替换成你原来剩下的fancybox配置项即可
      });
  });
});

代码放置位置 #

你可以任选以下任意一种方式放置代码，优先级从高到低推荐：

• 主题自定义面板的自定义JS区块：登录WordPress后台，进入「外观」-「自定义」，找到「自定义代码/自定义JavaScript」的设置项，直接把上述完整代码粘贴保存即可，该方式不会随主题更新丢失配置。
• 代码片段插件：安装Code Snippets这类代码管理插件，新建一个前端生效的代码片段，粘贴代码后保存即可，适合不想修改主题文件的场景。
• 主题自定义JS文件：如果你的主题有自定义JS入口文件，可以将代码添加到文件末尾，需要注意确保该JS文件的加载顺序晚于jQuery和fancybox的JS文件。
• 主题functions.php挂载：你也可以将代码通过wp_footer钩子挂载到页面底部，示例挂载代码如下，添加到主题functions.php文件末尾即可：

add_action('wp_footer', 'custom_fancybox_init', 999);
function custom_fancybox_init() {
?>
<script>
// 这里粘贴上面调整后的完整jQuery代码
</script>
<?php
}

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