Bootstrap 5 Lightbox加载异常：点击图片开新标签，疑PHP7.0所致？

结论：PHP 7.0版本不是问题根源 #

这个Lightbox插件是纯前端JS/CSS组件，运行在浏览器端，和服务器端的PHP版本完全无关——服务器仅负责把HTML/CSS/JS文件原样输出给浏览器，PHP版本不会影响前端代码的执行逻辑。

问题根源与修复方案 #

你的代码存在两个关键问题，导致插件未正确初始化：

1. 使用了过时的data属性前缀
   Bootstrap 5所有组件的data属性统一改用data-bs-前缀，而非旧版的data-。需要把data-toggle="lightbox"改为data-bs-toggle="lightbox"，同时data-caption也要对应改为data-bs-caption。

2. 未正确初始化插件
   你注释掉了初始化脚本，且即使启用该脚本，选择器.lightbox也无法匹配你的a标签（你的标签未添加这个类）。

修正后的完整代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test Lightbox for Bootstrap 5</title>
<!-- 按CSS优先、JS后置的顺序加载资源 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox@1.8.3/dist/index.bundle.min.js"></script>
<script>
// 手动初始化：匹配所有带data-bs-toggle="lightbox"的元素
document.querySelectorAll('[data-bs-toggle="lightbox"]').forEach(el => {
  el.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止a标签默认跳转行为
    const lightbox = new bs5Lightbox(el);
    lightbox.show();
  });
});
</script>
</head>

<body>
    <div class="row justify-content-center">
        <div class="col-sm-3" data-code="example-1">
            <a href="https://unsplash.it/1200/768.jpg?image=250" data-bs-toggle="lightbox" data-bs-caption="This describes the image">
                <img src="https://unsplash.it/600.jpg?image=250" class="img-fluid">
            </a>
        </div>
    </div>
</body>
</html>

额外排查建议 #

• 打开浏览器开发者工具（F12）的控制台，查看是否有JS加载错误或执行报错——这是排查前端插件问题最直接的方式。
• 确认所有CDN资源加载成功：在开发者工具的网络标签中检查bootstrap和bs5-lightbox的CSS/JS文件返回状态码为200。

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