如何添加Fancybox到WordPress主题

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