小巧实用的lightbox 灯箱js代码

想要一个好用的lighbox功能，可点击放大，可每页多个lightbox，可鼠标左右滑动，可触摸左右滑动操作，还要支持图片，视频，文字等，fslightbox可以满足这个需要，并且是一个只有12kb的js文件。

完整代码

<div>first-lightbox 
	<a data-fslightbox="first-lightbox" href="https://images.pexels.com/photos/2174974/pexels-photo-2174974.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">First Lightbox-1-image</a> 
	<a data-fslightbox="first-lightbox"  href="https://marketplace.canva.cn/iDpHA/MAEwm0iDpHA/1/tl/canva-MAEwm0iDpHA.jpg">First Lightbox-2-image</a> 
</div>
<br>
<div>second-lightbox 
	<a data-fslightbox="second-lightbox" href="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg">Second Lightbox-1-image</a> 
	<a data-fslightbox="second-lightbox" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQwRDIfU6Y72l2x-nFHaKrQU7l5B6unq57sZQ&usqp=CAU">Second Lightbox-2-image</a> 
</div>
<br>
<div>third-lightbox 
	<a data-fslightbox="third-lightbox" href="https://www.youtube.com/watch?v=jl8F4WglM3I">youtube 视频</a> 
	<a data-fslightbox="third-lightbox" href="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRrTFrhr_-pYR74jUgOy7IerAoHAX3zPIZZcg&usqp=CAU">third Lightbox-image</a> 
	<a data-fslightbox="third-lightbox" href="#text">文本</a>
	<div id="text">文本测试</div>
</div>
<script src="fslightbox.js"></script>

js文件下载

https://www.howtowp.xyz/wp-content/uploads/2023/02/fslightbox-basic-3.3.2-1.zip

示例

lightbox
lightbox

lightbox

有些站点的gallery可能是使用js引用的，需在加载完页面后刷新lightbox. 刷新函数为 refreshFsLightbox();

根据情况来使用刷新函数，

一般情况下，在页面结尾直接使用

window.addEventListener("load", function() {
      refreshFsLightbox();
});

或

window.addEventListener("DOMContentLoaded", function() {
      refreshFsLightbox();
});

如果这种方法不行，就需要找到调用gallery的js源文件，在调用gallery代码结尾前，直接加入refreshFsLightbox(); 即可。

本代码引用自https://fslightbox.com/

本站所有测试环境均使用ubuntu+lnmp
所有的测试、优化均基于lnmp进行，大部分方法均是相通的，仅仅因为是lnmp是一键安装，集成了大部分安装脚本，方法配置。
本人对于服务器，网站运行环境是十窍通了九窍，还有一窍不通，一桶不满，半桶晃荡，所以在配置上能偷懒的就偷懒，能省事的就省事，并且这些配置仅仅为自己配置过的记录，所有配置均自己在自己服务器上实现，并不一定通用所有配置环境，并且文章描述也可能不通顺，前言不搭后语，驴唇不对马嘴，请需要参照此文章配置的客观慎思而行，不保证你配置的时候一定可以成功。
此段落本站所有文章均有，作者已完成自我批评，只接受评论区指正，不再接受批评，谢谢。