什么是Fancybox

Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果,对于一组相关的图片添加导航操作按纽。

引入相关文件

jquery.fancybox.min.css以及jquery.fancybox.min.js两个文件下载到本地(也可以使用CDN)。然后在functions.php文件中添加以下代码:

// 引入CSS文件
function add_styles() {
    wp_register_style( 'fancybox', get_template_directory_uri() . '/css/jquery.fancybox.min.css', array(), '1.0', 'all' );
    wp_enqueue_style( 'fancybox' );
add_action( 'wp_enqueue_scripts', 'add_styles' );

// 引入js文件
function add_scripts() {
    wp_register_script( 'fancybox' , get_template_directory_uri() . '/js/jquery.fancybox.min.js' );
    wp_enqueue_script( 'fancybox' );
}
add_action( 'wp_enqueue_scripts' , 'add_scripts' );

增加 data-fancybox 属性

需要为图片外层的<a>标签中添加data-fancybox属性才能使fancybox生效。形如:

<a href="原图片地址" fancybox="gallery"><img src="缩略图地址" /><a>

这可以使用jQuery来实现:

jQuery(".gallery-item a").attr('data-fancybox','gallery');

由于我主要是想为相册中的图片添加灯箱效果,所以还可以修改相册短代码的回调函数,让它生成以上格式的html结构,详情可见我上一篇文章。主要是以下这句代码:

$image_output = '<a href="'.wp_get_attachment_url($id).'" data-fancybox="gallery"><img data-original="'.wp_get_attachment_thumb_url($id).'"/></a>';

到这里fancybox就生效了。

重载 fancybox

如果开始了全站PJAX就会发现进入新页面后fancybox会失效,失效的原因在我《WordPress开启全站PJAX》的文章中有提到过。解决的办法就是在pjax:complete函数中重新初始化fancybox即可,代码如下:

$(document).on('pjax:complete', function() {
        $("#loading").css('display','none'); 
        jQuery('[data-fancybox="gallery"]').fancybox();
    });