简简单单给网站图片添加了灯箱功能，试试看看效果如何：

图片加载中…图片暂时无法加载

图片加载中…图片暂时无法加载

图片加载中…图片暂时无法加载

只是简单引用，未做图片分组处理。

添加代码方法

1. 在heade 或者foot 中引入以下资源：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script> 

2. 在添加一个JavaScript脚本设置图片标签

$(document).ready(function() {
            $('img').each(function() {
                var imgSrc = $(this).attr('src'); // 获取img的src
                var imgAlt = $(this).attr('alt'); // 获取img的alt

                // 创建新的<a>标签
                var newLink = $('<a>', {
                    href: imgSrc, // 设置href为img的src
                    'data-fancybox': 'gallery', // 设置data-fancybox属性
                    'data-caption': imgAlt // 设置data-caption为img的alt
                });

                // 将当前img添加到新的<a>标签中
                $(this).wrap(newLink); // 用新的<a>标签包裹当前的<img>标签
            });
        });