如何添加Fancybox到WordPress主题

添加Fancybox到WordPress主题,启用默认相册模态弹窗效果

主页 \ 新手指南 \ 如何添加Fancybox到WordPress主题
最后更新:
浏览量: 240
作者:
分类:新手指南
评论: 0

FancyBox 图片灯箱效果不仅可以点击图片放大,而且还支持幻灯片播放、全屏查看、缩略图列表以及分享照片的功能。是不是比 Lightbox 还过瘾!最厉害连移动端的适配都做了,Lightbox 在移动端是不能自适应的。

官方对 Fancybox 安装启用流程说明

第一:添加最新的 jQuery 和 fancybox 文件

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>

第二:对图像链接改造,添加 data-fancybox="gallery"到链接里面

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>

第三:Have fun!

下面来具体介绍 FancyBox 如何部署集成到 WordPress 主题

第一:下载 Fancybox 代码,解压后将 fancybox 文件放到主题根目录内(下载地址右侧栏顶部)

第二:引入脚本、引入样式、添加以下代码到主题 functions.php 中

//如果主题自身已引入可删除
add_action ('wp_enqueue_scripts', 'scripts');
function scripts() {
   wp_enqueue_script( 'jquery-latest', get_template_directory_uri() . '/fancybox/jquery-3.3.1.min.js' );
}
//如果主题自身已引入可删除

add_action ('wp_enqueue_scripts', 'add_fancybox_script');
function add_fancybox_script() {
    if ( is_single() ) {
        $add_script = 'jQuery(document).ready(function($){ 
            $("a[href$=".jpg"], a[href$=".png"], a[href$=".jpeg"], a[href$=".gif"]", a[href$=".bmp"]").fancybox();
            $("[data-fancybox]").fancybox({
                buttons: ["slideShow","zoom","fullScreen","thumbs","close"],
                transitionEffect: "zoom-in-out",
                protect: true
            });		
        });'; 
        wp_enqueue_script ('fancybox-script', get_template_directory_uri() . '/fancybox/jquery.fancybox.min.js', array(), '3.5.7', true);     
        wp_add_inline_script ('fancybox-script', $add_script, 'after');
   }
}

add_action ('get_footer', 'fancy_footer_styles' );
function fancy_footer_styles() {
    if ( is_single() ) {
        wp_enqueue_style( 'fancybox-style', get_template_directory_uri() . '/fancybox/jquery.fancybox.min.css' );
    }   
};

完成以上两步,即可开启图像弹窗效果

Fancybox 可自定义参数说明,可根据自己的需要修改

$("a[href$=".jpg"], a[href$=".png"], a[href$=".jpeg"], a[href$=".gif"]", a[href$=".bmp"]").fancybox();

设置常用图像启用弹窗效果

buttons: ["slideShow","zoom","fullScreen","thumbs","close"],

设置需要开启的按钮,"slideShow"播放按钮、"zoom"缩放按钮、"fullScreen"全屏按钮、"thumbs"缩略图按钮、"close"关闭按钮

transitionEffect: "zoom-in-out",

设置图像切换效果,可选值:fade、slide、circular、tube、zoom-in-out、rotate

相关文章

大神,别默默的看了,快来点评一下吧!:)