Fancybox v4自定义Toolbar隐藏工具栏按钮配置不生效问题

你配置后幻灯片、缩放按钮仍显示的核心原因：这类按钮不属于Toolbar组件的内置渲染项，是Fancybox默认自动加载的独立插件自动注入到工具栏的，仅修改Toolbar.display列表不会影响这些插件的按钮渲染。

根据你的需求选择对应配置即可：

方案1：彻底移除对应功能和按钮 #

直接禁用不需要的默认插件，插件关闭后对应按钮会自动消失，代码如下：

Fancybox.bind('[data-fancybox="gallery"]', {
  Toolbar: {
    display: [
      { id: "prev", position: "center" },
      { id: "counter", position: "center" },
      { id: "next", position: "center" },
      "close",
    ],
  },
  plugins: {
    Slideshow: false, // 移除幻灯片播放按钮
    Zoom: false, // 移除缩放按钮
    Fullscreen: false // 不需要全屏按钮可保留该行，否则删除
  }
});

方案2：保留功能仅隐藏工具栏按钮 #

如果需要保留缩放、幻灯片的功能（比如快捷键触发、滚轮缩放、手势操作），仅隐藏工具栏上的按钮，不需要禁用插件，单独关闭插件的按钮渲染配置即可：

Fancybox.bind('[data-fancybox="gallery"]', {
  Toolbar: {
    display: [
      { id: "prev", position: "center" },
      { id: "counter", position: "center" },
      { id: "next", position: "center" },
      "close",
    ],
  },
  Slideshow: { button: false },
  Zoom: { button: false },
  Fullscreen: { button: false }
});

注意事项 #

• 配置上传到Shopify后，记得清空主题缓存、浏览器缓存再测试，避免加载旧版本JS代码导致配置不生效
• 请确认页面加载的Fancybox确实是v4版本，v3版本的配置逻辑和v4不通用

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