如何在Fancybox 4中切换缩略图栏显示状态？调用toggle方法不生效怎么办

失效原因 #

原有代码在document.ready阶段执行时，Fancybox实例还未创建（仅当用户触发展示内容的操作时，Fancybox才会生成对应实例），此时Fancybox.getInstance()返回null，调用插件方法自然不会生效。

解决方案 #

最优方案：初始化时直接配置（推荐）

Fancybox 4 原生提供了缩略图默认显示的配置项，无需额外调用切换API，直接在绑定初始化时传入配置即可：

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
Fancybox.bind("[data-fancybox]", {
  Thumbs: {
    autoStart: false // 禁止缩略图栏默认自动显示
  }
});
</script>

动态切换方案（适用于需要按需控制显示状态的场景）

如果确实需要通过API动态控制缩略图栏状态，需要监听Fancybox实例创建完成的事件，在实例就绪后再调用对应方法：

<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>
<script>
Fancybox.bind("[data-fancybox]", {
  on: {
    show: (instance) => {
      // 直接使用回调返回的当前实例调用插件方法
      instance.plugins.Thumbs.toggle();
    }
  }
});
</script>

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