如何添加Fancybox到WordPress主题

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

主页 \ 新手指南 \ 如何添加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() ) {
        wp_enqueue_script ('fancybox-script', get_template_directory_uri() . '/fancybox/jquery.fancybox.min.js', array(), '3.5.7', true);     
    }
}

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' );
    }   
};

第三:修改 jquery.fancybox.min.js 文件,在文件代码尾部添加如下代码

启用默认相册灯箱

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

启用链接包含扩展名为.jpg,.jpeg,.png 或.gif 的图像灯箱

jQuery("a[href$='.jpg'], a[href$='.png'], a[href$='.jpeg'], a[href$='.gif']").fancybox();
站长: ThemeBest 本站承接 WordPress/DedeCMS等系统建站、仿站、开发、定制等服务!

相关文章

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