网站灯箱效果图怎么做（手把手教你制作网站灯箱效果图）

前言

如果网站已经上线并且SEO数据整体上升，不建议安装“灯箱”，原因如下:

虽然百度在优化落地页时给出了一些提示，例如可以放大页面图片、使用滑动效果等对搜索引擎优化有利的做法。然而，如果你的网站数据在各个方面都在增长的情况下，我不建议安装这类插件。原因如下：

1、这些细节改进对于直接影响网站排名来说是非常微小的，因此不使用灯箱效果并不会对网站产生太大的负面影响。

2、如果你的网站过去曾进行过大规模的内容采集，并且其中包含违规内容，在改动页面后，搜索引擎会重新抓取整个网站，并进行识别。这意味着之前可能没有被识别出来的违规内容，可能在这次重新抓取中被发现，从而导致网站遭到降权或者被K站的风险增加。这也是为什么很多网站在换服务器或者修改细节时会遭遇降权问题的原因之一。

灯箱源码下载

在制作网站灯箱效果图之前，我们需要下载JS和CSS代码。
下载地址：链接：https://pan.baidu.com/s/1g5B6-UW3pqzXVy9gtkgD-Q?pwd=mjfe 提取码：mjfe 。
如图：
文件夹中一共三个文件 ，一份CSS，二份JS文件，将CSS和JS文件复制到你自己的项目中，并调用出来。

灯箱源码下载好了之前如何安装呢？

安装方法

灯箱安装只需要“手动”操作三步即可，又简单又实用，并且没有限制CMS管理系统哦，因为这是前端的，不是后端的（小白必知）。

第一步

首先，将css和js文件分别存放到网站放在样式和js的文件夹中，这里小编拿“迅睿CMS”网站内容管理系统作为演示，方便提供一个思路给大家清楚的了解到如何将网站中的图片实现灯箱效果。

第二步

将css和js文件引入到网站模板中

/*CSS引入*/
<link rel="stylesheet" href="{HOME_THEME_PATH}pc/css/jquery.fancybox.min.css" />
/*JS引入*/
<script src="{HOME_THEME_PATH}pc/js/jquery-3.2.1.min.js"></script> 
<script src="{HOME_THEME_PATH}pc/js/jquery.fancybox.min.js"></script>

注意：不同的CMS，调用方式不一样，自行解决。傻瓜式可以采用”绝对路径“引入。

第三步

模板调用：
在内容模板中直接复制"script"代码到内容区下方。

<script> $(function () { $('.entry-content').find('img').each(function () { var _this = $(this); var _src = _this.attr("src"); _this.wrap('<a data-fancybox="images" href="' + _src + '"></a>'); }) }) </script>

如图：
完成以上三步后，我们到网站的文章详情页查看下效果吧。

最终灯箱效果

最终灯箱效果