Implementing FancyBox

时间：2011-12-07 作者：beacon

我试图在不使用插件的情况下将fancybox实现到WP中。我做了一些研究，看了几个例子，但仍然存在一个问题。任何帮助都将不胜感激。代码如下：

在函数中。php：

function loadFancyBox()
{
if (is_single() && strpos($post->post_content,\'class="fancy"\') !== false)
{
        wp_enqueue_style(\'fancyStyle\', get_template_directory_uri() . \'fancyBox/jquery.fancybox.css\');
        wp_enqueue_script(\'fancyScript\', get_template_directory_uri() . \'fancyBox/jquery.fancybox-1.3.4.js\', array(\'jquery\'), \'\', true );
}
}
add_action(\'wp_print_styles\', \'loadFancyBox\');
在我的标题中。php首先调用jQuery，然后调用：

<script>
$(document).ready(function() {

$("a.fancy").fancybox({
    \'transitionIn\'  :   \'elastic\'
});

});
</script>
最后，我向任何img添加class=“fancy”标记。此时，任何链接都会指向该图像，但没有加载fancybox。

非常感谢。

2 个回复
SO网友:helenhousandi

如果您按照@patnz的建议检查控制台中的错误，您可能会看到$未定义。这是因为WordPress以noConflict模式加载jQuery。请尝试以下操作：

<script>
jQuery(document).ready(function($) {
    $("a.fancy").fancybox({
        \'transitionIn\'  :   \'elastic\'
    });
});
</script>

SO网友:patnz

酷，现在你知道js很好了。接下来要检查条件语句是否正常工作。is\\u single（）仅在贴子页上返回true。is\\u singular（）将在帖子、页面和附件上返回true。您可能需要在功能中全球化$post。在函数中添加一些回声只会帮助您看到它在哪里中断。

出于测试目的，我会在条件测试中添加“| | 1==1”，使其始终为真。然后，您可以通过查看源代码来确保正确打印脚本的路径。在头部找到它们并单击它们，这将显示脚本源或404页面的源。如果得到404，则需要在排队函数中修复location参数。

if (is_single() && strpos($post->post_content,\'class="fancy"\') !== false || 1==1)
{
    //this is now always true so scripts will be printed on all pages
此外，我会将该函数挂接到wp\\u head上，而不是wp\\u print\\u样式，因为您也在添加脚本。因此，请尝试以下测试。既然您现在知道js正在工作，那么实际上只是缩小php不工作的可能性的问题。

function loadFancyBox()
{
    //first find out if you need to globalise $post;
    echo \'1\' . $post->post_title;//if this displays you don\'t need to
    global $post;
    echo \'2\' . $post->post_title;//if only this displays you do need to

    if (is_single() && strpos($post->post_content,\'class="fancy"\') !== false || 1==1)
    {
        echo \'hello\';
        //since 1==1 is always true echo should display at the top of every page

        //double check these paths are being printed correctly in the source code
        wp_enqueue_style(\'fancyStyle\', get_template_directory_uri() . \'fancyBox/jquery.fancybox.css\');
        wp_enqueue_script(\'fancyScript\', get_template_directory_uri() . \'fancyBox/jquery.fancybox-1.3.4.js\', array(\'jquery\'), \'\', true );
    }
}
//add_action(\'wp_print_styles\', \'loadFancyBox\');
add_action(\'wp_head\', \'loadFancyBox\');

结束
标签： theme-development   jquery   小码农  

相关推荐

JQuery：获取POST页面上#Content字段的内容

我通过这个jquery调用获得了#内容字段html：jQuery(\"#content\").html() 这似乎在“添加新帖子”页面上失败了。有关于如何获取#content div内容的提示吗？干杯