lightGallery插件：默认隐藏缩略图且显示toggleThumb切换按钮的实现

问题核心：直接设置thumbnail: false会完全禁用缩略图模块，连带toggleThumb按钮也被隐藏，所以得换个思路——开启缩略图模块，用CSS默认隐藏缩略图容器，保留toggleThumb的控制功能。

正确配置步骤 #

1. JS配置：开启缩略图模块，同时保留toggleThumb和其他需要的参数

lightGallery(document.getElementById('your-gallery-id'), {
  allowMediaOverlap: true,
  toggleThumb: true,
  thumbnail: true, // 必须设为true才能启用缩略图模块和toggleThumb按钮
  thumbPosition: 'bottom' // 可根据需求调整缩略图位置
});

2. CSS默认隐藏缩略图：通过样式强制初始状态下缩略图容器不显示

.lg-outer .lg-thumb-outer {
  display: none;
}

效果说明 #

• 页面加载后，缩略图默认隐藏，工具栏的toggleThumb按钮正常显示
• 点击toggleThumb按钮时，lightGallery会自动切换.lg-thumb-outer的display属性，实现缩略图的显示/隐藏切换，无需额外编写JS逻辑

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