如何在WordPress主题中使用Facebox?

时间:2013-04-17 作者:rpd

我正在尝试添加Facebox (lightbox类型图像查看器)到我的WordPresstheme 但目前尚未加载图像。我已经尝试过对此进行编码,并使用Facebox WP Gallery plugin 两种方法都没有成功。

我目前在中使用此代码对其进行了硬编码header.php 在我的自定义主页模板上(我将facebox文件放入facebox1.3 “我的WP主题文件夹”中的文件夹)。

<link href="<?php bloginfo(\'stylesheet_url\'); ?>facebox1.3/src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<link href="<?php bloginfo(\'stylesheet_url\'); ?>facebox1.3/css/example.css" media="screen" rel="stylesheet" type="text/css" />
<script src="<?php bloginfo(\'template_directory\'); ?>/facebox1.3/lib/jquery.js" type="text/javascript"></script>
<script src="<?php bloginfo(\'template_directory\'); ?>/facebox1.3/src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(\'a[rel*=facebox]\').facebox({
            loadingImage : \'facebox1.3/src/loading.gif\',
            closeImage   : \'facebox1.3/src/closelabel.png\'
        })
    })
</script>
此时,即使加载的gif也不会显示。

我做错了什么?

1 个回复
最合适的回答,由SO网友:tfrommen 整理而成

// UPDATE

这应该有用(至少对我有用):

在主题文件夹中,创建子文件夹faceboxsrc 将文件夹放入facebox 文件夹(即closelabel.png、facebox.css、facebox.js、load.gif)functions.php:


function my_facebox_scripts() {
    wp_enqueue_style(
        \'facebox\',
        get_template_directory_uri().\'/facebox/facebox.css\',
        array(), false, \'screen\'
    );

    wp_enqueue_script(
        \'facebox\',
        get_template_directory_uri().\'/facebox/facebox.js\',
        array(\'jquery\'), false, true
    );
}
add_action(\'wp_enqueue_scripts\', \'my_facebox_scripts\');

function my_facebox_jquery() {
    $path = get_template_directory_uri();
    echo <<<JQUERY
<script type="text/javascript">
    jQuery(document).ready(function($) {
        $(\'a.facebox-link\').facebox({
            loadingImage : \'{$path}/facebox/loading.gif\',
            closeImage   : \'{$path}/facebox/closelabel.png\'
        });
    });
</script>
JQUERY;
}
add_action(\'wp_footer\', \'my_facebox_jquery\', 999999);
Please note 我从中更改了选择器rel=faceboxfacebox-link 班所以只需添加class="facebox-link" 到您的facebox链接(或自定义此行为)。

结束

相关推荐

如何防止WordPress加载页面顶部的jQuery库

我正在开发一个必须是HTTPS安全的网站,WordPress正在加载<script src=\"http://code.jquery.com/jquery-1.7.1.min.js\"></script> 在我的页面顶部,之前<html> 给我一个不安全的错误。我找不到该文件的加载位置,无法阻止其加载。不幸的是,我无法显示该网站,因为它是一个联邦信用社网站,如果我在网站完成之前公开展示该网站,将违反我们的合同协议。以下是通过Chrome web开发工具(单击可缩放)发布