如何在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=facebox 到facebox-link 班所以只需添加class="facebox-link" 到您的facebox链接（或自定义此行为）。

结束
标签： images   jquery   小码农  

相关推荐

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

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