前言
因为博客的图片视频都无法自适应电脑和手机，所以找了灯箱，第一个用的是lightbox2
lightbox2简洁简单代码让我好弄，可是有一个问题，他只支持图片不支持其他媒体
所以在茫茫的互联网找到了这个东西[glightbox]
链接:https://biati-digital.github.io/glightbox/
glightbox不仅支持图片灯箱，还支持视频链接以及内插页(比如b站的切入代码)
这是他们网站的示例(他们说支持youtube等视频网站自动播放，这里没看过)
那么废话不多说我们就开始吧
正文
首先我们先引用glightbox的css和js
<!-- jsd -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/glightbox/dist/css/glightbox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/mcstudios/glightbox/dist/js/glightbox.min.js"></script>
<!-- unpkg -->
<link href="https://unpkg.com/glightbox@latest/dist/css/glightbox.css" rel="stylesheet" />
<script src="https://unpkg.com/glightbox@latest/dist/js/glightbox.js" ></script>
然后配置灯箱选项，这里使用的是示例的方式，如果不行把//的注释删了看看
<script>
const lightbox = GLightbox({
touchNavigation: true, // 移动端支持
loop: true, //循环播放
autoplayVideos: true //视频自动播放(没用的)
});
</script>
最后把他们合在一起，并让媒体添加超链接并声明此类
<!-- 示例图片 -->
<a href="large.jpg" class="glightbox">
<img src="small.jpg" alt="image" />
</a>
<!-- 视频直链(1) -->
<a href="https://vodfs.oppo.cn/vodwm/20230812/JalQOg022337_h720.mp4" class="glightbox">
<img src="small1.jpg" alt="image" />
</a>
<!-- 或者是嵌入式视频 -->
<a href="https://player.bilibili.com/player.html?aid=80433022" class="glightbox">
<img src="small2.jpg" alt="image" />
</a>
这是glightbox的效果视频😂
示例/扩展
都在这个包了，有兴趣可以探索哦
除了最基本的，还有更多的可以设置
具体就在https://github.com/biati-digital/glightbox
懒得讲了🌚
总结
没什么好总结的，就是和lightbox2差不多，支持的更多了😂