零基础学做网站培训介绍

当前位置:

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

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

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. 然后在后台插入图片时,“附件显示设置”处选择“链接到媒体文件”,尺寸选择“缩略图”即可。
    Fancybox灯箱展播效果设置方法

相关阅读:

网站图片轮播图功能制作

如何修改discuz 轮播图幻灯片的切换时间

WordPress网站制作banner轮播图的通用方法

发表评论

邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在做网站过程中,如果想在一张网页上实现图片加文字的格式,就需要通过Dreamweaver CS6破解版软件设置背景图片。可以在网页上添加背景图片,然后
  • 各位同学大家好,我是学做网站论坛的建站会员广东崔磊。很感谢论坛老师在我学习网站制作课程期间,对我的辅导帮助。现在在这里我想给同学做分享一
  • 以下是学做网站论坛关于《Dreamweaver 如何添加网页图片热区链接》视频教程。
  • 网页如何添加背景音乐 视频教程附件下载 (1109589 次浏览)
    在上网过程中,有很多网站打开后会自动播放背景音乐,而且只有当关闭网页之后背景音乐才会停止。在我们自己建网站,同样也可以给自己的网页添加背
  • QQ客服在很多网站都很普通,它可以很方便的让浏览我们网站的用户通过QQ进行交流,不需要去查找QQ再加好友,只需要点一下QQ客服上的图标就可以直接发信
  • 网页如何添加视频动画 视频教程 (1100863 次浏览)
    在网站制作过程中,特别是学习视频网站制作教程时,是需要给网站中添加很多的视频的,对于网站如何添加视频有二种方法:一种是添加自己网站的视频,另
  • 有些做图片网站的学员咨询怎么给自己的图片网站添加灯箱展播效果,就是当用于打开自己做的网站内容里的第一张图片后就会自动出现前台的切换按钮,可以
  • Wordpress标签云是将网站里的标签附着不同的颜色,好像一个七彩的云一样,在自己建网站时,可以美化我们的网站。效果如下:我们在学习怎么做
  • 使用WP程序制作门户网站时,需要调用网站头条新闻,让第一个文章标题与其它的标题不一样,以形成新闻头条的效果。如下图:如何使用wp网站代码
  • 有些网站的文字的后面或者下面都有阴影效果,这样使文字更有立体感。并且可以根据自己网站版面要求去设置阴影的颜色,离文字的距离,阴影范围的大小等