使用Lightbox2点击图片后弹出多余菜单栏问题求助

我用以下代码实现图片展示功能，已正确引入Lightbox2的CSS和JS文件，功能可正常运行，但点击图片弹出Lightbox时会出现不需要的菜单栏。

<div class="carousel-item <?php echo $isActive ? 'active' : ''; ?>">
    <a href="<?php echo $photo['filepath']; ?>" data-lightbox="product-photos">
        <img src="<?php echo $photo['filepath']; ?>" alt="Product Image" style="width: 200px; height: 200px;">
    </a>
</div>

为便于理解附上截图：显示Lightbox弹窗时带有多余菜单栏

解决方案 #

方法1：修改Lightbox2配置项 #

初始化Lightbox时，添加配置项隐藏导航菜单栏：

lightbox.option({
  'showNavigation': false
});

方法2：通过CSS强制隐藏 #

直接添加CSS样式，移除Lightbox的导航元素：

.lb-nav {
  display: none !important;
}

方法3：排查样式冲突 #

如果以上方法无效，检查项目中自定义CSS是否意外覆盖了Lightbox的默认样式，重点排查.lb-nav、.lb-prev、.lb-next这类导航相关的类名，移除冲突的样式规则。

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