如何给网站图片添加Fancybox灯箱展播效果

有些做图片网站的学员咨询怎么给自己的图片网站添加灯箱展播效果，就是当用于打开自己做的网站内容里的第一张图片后就会自动出现前台的切换按钮，可以自动展播内容里所有的图片。效果如下图：

对于这种图片展播的效果，我们自己做网站时也可以轻松实现，只需要一个JQUERY插件就简单搞定了。下面学做网站论坛介绍一下实现方法。

方法/步骤

1. 在自己的网站头部代码里添加以下的代码，来引入Fancybox灯箱展播插件；（主要包含了 jquery.fancybox.min.css 和 jquery.fancybox.min.js 两个文件）

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

2. 在需要展播的图片添加超链接，并且超链接代码里添加data-fancybox 属性，也可以添加data-caption 属性来添加标题。如下面代码：

   
   <a href="image.jpg" data-fancybox data-caption="My caption">
   
       <img src ="thumbnail.jpg" alt ="My caption"/>
   
   </a>
   
   

3. 这样就可以实现Fancybox灯箱展播效果了。
4. 如果你使用的是Wordpress程序就更方便了，给图片添加data-fancybox 属性，可以通过下面的函数自动添加。只需要将以下的代码放到自己的模板函数文件functions.php里即可。（如果你不会使用Wordpress建网站，可以先学习一下wordpress建站视频教程）

   
   /*
   
   代码来源：学做网站论坛 https://www.xuewangzhan.net/
   
   fancybox图片灯箱效果
   
   */
   
   add_filter('the_content', 'fancybox1');
   
   /*add_filter('the_content', 'fancybox2');*/
   
   function fancybox1($content){ 
   
       global $post;
   
       $pattern = "/<img(.*?)src=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>/i";
   
       $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"><img$1src=$2$3.$4$5$6></a>';
   
       $content = preg_replace($pattern, $replacement, $content);
   
       return $content;
   
   }
   
   /*function fancybox2($content){ 
   
       global $post;
   
       $pattern = "/<a(.*?)href=('|")([^>]*).(bmp|gif|jpeg|jpg|png|swf)('|")(.*?)>(.*?)<\/a>/i";
   
       $replacement = '<a$1href=$2$3.$4$5 data-fancybox="images"$6>$7</a>';
   
       $content = preg_replace($pattern, $replacement, $content);
   
       return $content;
   
   }
   
   */
   
   

5. 然后在后台插入图片时，“附件显示设置”处选择“链接到媒体文件”，尺寸选择“缩略图”即可。