如何在GLightbox中使用图片alt标签作为灯箱内的替代文本？

方法1：通过data-glightbox属性手动指定alt #

GLightbox不会自动读取缩略图的alt属性，需要在触发灯箱的<a>标签上添加data-glightbox属性，明确传入alt文本，格式为data-glightbox="alt: 你的描述内容"。

修改后的完整代码：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.min.css" />
</head>
<body>
<div id="glightbox-demo">
    
<h2>Single Images</h2>
  <a href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" class="glightbox" data-glightbox="alt: demo alt1!">
    <img alt="demo alt1!" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_s.jpg" />
  </a> 
  <a href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg" class="glightbox" data-glightbox="alt: demo alt2!">
   <img alt="demo alt2!" src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_s.jpg" />
  </a>  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>
<script>
const lightbox = GLightbox({

});
</script>
</body>
</html>

方法2：初始化时自动提取缩略图alt #

如果图片数量较多，不想逐个配置data-glightbox，可以在GLightbox初始化时，通过钩子函数自动从缩略图的alt属性提取内容，赋值给灯箱内的大图。

示例代码：

<!DOCTYPE html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/css/glightbox.min.css" />
</head>
<body>
<div id="glightbox-demo">
    
<h2>Single Images</h2>
  <a href="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_b.jpg" class="glightbox">
    <img alt="demo alt1!" src="http://farm4.staticflickr.com/3712/9032543579_1217e6566b_s.jpg" />
  </a> 
  <a href="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_b.jpg" class="glightbox">
   <img alt="demo alt2!" src="http://farm4.staticflickr.com/3818/9036037912_83576fe5ab_s.jpg" />
  </a>  
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/glightbox/3.2.0/js/glightbox.min.js"></script>
<script>
const lightbox = GLightbox({
  onOpen: (target) => {
    // 获取当前触发元素下缩略图的alt
    const imgAlt = target.querySelector('img').getAttribute('alt');
    // 给灯箱内的大图设置alt
    const lightboxImg = document.querySelector('.glightbox-slide.active img');
    if (lightboxImg && imgAlt) {
      lightboxImg.setAttribute('alt', imgAlt);
    }
  },
  onSlideChange: (slide) => {
    // 切换轮播时同步更新alt
    const target = slide.dataTrigger;
    const imgAlt = target.querySelector('img').getAttribute('alt');
    const lightboxImg = slide.querySelector('img');
    if (lightboxImg && imgAlt) {
      lightboxImg.setAttribute('alt', imgAlt);
    }
  }
});
</script>
</body>
</html>

两种方法适用场景 #

• 方法1适合图片数量少的场景，配置简单直接；
• 方法2适合批量图片，减少重复操作，自动同步缩略图的alt内容。

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