必须用包裹实现图片跳转，因不支持href属性且直接加onclick会破坏可访问性、语义和安全性；正确做法是，并确保alt非空、避免pointer-events:none等干扰样式。
为什么直接给 <img> 加 onclick 不行？
很多人试过写 <img src="a.jpg" onclick="window.open(this.src)">，结果只是新开一个空白页或下载图片——浏览器默认行为没被阻止，也没有居中、遮罩、缩放逻辑。LightBox 的核心不是“打开图”，而是“在当前页覆盖一层带交互的视图层”。原生 HTML 没有内置这个能力，必须靠 JS 控制 DOM 层级和 CSS 样式。
lightgallery.js 是最省事的选择吗？
对多数项目来说是的。它不依赖 jQuery（v2+），体积小（gzip 后约 25KB），支持触控、键盘导航、缩放手势，且只需几行代码就能启用：
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/css/lightgallery-bundle.min.css"><script src="https://cdn.jsdelivr.net/npm/lightgallery@2.7.2/lightgallery.umd.min.js"></script><div id="lightgallery">
<a href="big1.jpg">@@##@@</a>
<a href="big2.jpg">@@##@@</a>
</div>
<script>
lightGallery(document.getElementById('lightgallery'), {
selector: 'a',
download: false,
zoomFromOrigin: true
});
</script>
注意几个关键点：
-
href必须指向高清原图，src是缩略图——否则放大后模糊 - 不要用
<img src="thumb1.jpg" alt="图1">直接包裹onclick，必须用<a></a>包裹，否则 lightgallery 无法识别图组 - 如果页面已有其他 JS 框架（如 React/Vue），需用其生命周期钩子初始化，不能在 DOM 加载完就硬调用
自己写一个极简 LightBox，只用 30 行 JS 怎么做？
如果你只想支持单图点击放大、无动画、无图组，可以不用库。关键是：创建遮罩层（overlay）、插入大图（modal-img）、监听 Escape 和点击遮罩关闭：
@@##@@ <div id="lightbox" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.9);z-index:9999;"> @@##@@ </div>
JS 部分（放在 底部）：
document.querySelectorAll('.lightbox-trigger').forEach(img => {
img.addEventListener('click', () => {
const largeSrc = img.dataset.large;
const modal = document.getElementById('lightbox');
const modalImg = document.getElementById('lightbox-img');
modalImg.src = largeSrc;
modal.style.display = 'block';
document.body.style.overflow = 'hidden';
});
});
document.getElementById('lightbox').addEventListener('click', e => {
if (e.target === e.currentTarget) {
e.currentTarget.style.display = 'none';
document.body.style.overflow = '';
}
});
document.addEventListener('keydown', e => {
if (e.key === 'Escape') {
document.getElementById('lightbox').style.display = 'none';
document.body.style.overflow = '';
}
});
容易踩的坑：
- 没加
document.body.style.overflow = 'hidden'→ 滚动条还在，背景可滚，体验断裂 - 用
innerHTML插入图片 → 可能触发 XSS（尤其用户上传图场景），必须用.src赋值 - 没处理
load事件就设display:block→ 图片未加载完成时高度为 0，显示异常
移动端双击放大失效？CSS 缩放和 touch 事件怎么配合？
纯 CSS 的 transform: scale() 在移动端常被系统双指缩放拦截，而且不响应 touchstart。lightgallery 默认禁用 user-scalable=no，但你的页面 <meta name="viewport"> 如果写了 user-scalable=0，整个 LightBox 就会失去缩放能力。
正确做法：
- 确保 viewport 允许缩放：
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> - LightBox 内部用
touchmove+transform实现拖拽，而不是依赖浏览器原生缩放 - 如果自己实现，别用
scale()单独控制图片，而要结合translateX/Y和max-width/max-height做边界限制，否则图片会移出视口
真要兼容老安卓 WebView 或微信内嵌浏览器，优先测 lightgallery 的 mobileSettings 配置项，比手写更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
