如何使用JavaScript为部分图片禁用Lightbox灯箱效果？

你可以通过自定义标记类的方式灵活控制哪些图片不需要触发Lightbox，具体实现步骤如下：

• 第一步：给不需要触发Lightbox效果的图片添加自定义类名，比如no-lightbox，示例HTML写法：

<!-- 正常触发Lightbox的图片 -->
<img src="示例图片地址.jpg" alt="普通图片">
<!-- 禁用Lightbox的图片 -->
<img src="示例图片地址2.jpg" alt="禁用Lightbox的图片" class="no-lightbox">

• 第二步：修改你的原有JS代码，调整图片选择器规则，排除带no-lightbox类的图片，同时修复原有代码的语法疏漏，修改后完整代码如下：

lightbox = document.createElement('div')
lightbox.id = 'lightbox' 
document.body.appendChild(lightbox) 

// 仅选择不带no-lightbox类的img元素绑定点击事件
const images = document.querySelectorAll('img:not(.no-lightbox)') 
images.forEach(image => {
  image.addEventListener('click', e => {
    lightbox.classList.add('active')
    const img = document.createElement('img')
    img.src = image.src
    while(lightbox.firstChild) {
        lightbox.removeChild(lightbox.firstChild)
    }
    lightbox.appendChild(img)
  })
})

如果需要更灵活的过滤规则，也可以根据图片路径、所属父容器等属性筛选，比如仅给文章内容区域的图片加Lightbox，就把选择器调整为document.querySelectorAll('.article-content img:not(.no-lightbox)')即可。

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