我是如何获得jQuery Quicks并与WordPress合作的?

时间:2011-11-01 作者:Phoenix

我一直在尝试让这个插件工作,但我失败了。我有如下代码:

这个portfolio-terms is筛选按钮:

            <div id="portfolio-terms">
                <ul>
                    <li><a href="#" class="all current"><?php _e(\'All\', \'framework\'); ?></a><span>/</span></li>
                    <?php 
                    wp_list_categories(array(
                            \'title_li\' => \'\', 
                            \'taxonomy\' => 
                            \'skill-type\', 
                            \'walker\' => new Portfolio_Walker(),
                            \'show_option_none\' => \'\'
                        )
                    ); ?>
                </ul>
            </div>


这个portfolio-items 是需要过滤的图像:

       <ul id="portfolio-items" class="<?php if($magic_door) : ?>enabled<?php endif; ?> clearfix">

               <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                    <li id="portfolio-<?php the_ID(); ?>" class="<?php echo $output; ?>visible">

                        <div <?php post_class() ?> id="post-<?php the_ID(); ?>">

                            <a class="entry-link" href="<?php the_permalink(); ?>"></a>

                            <?php tz_featured_image(get_the_ID(), TRUE); ?>

                        </div>

                    </li>

               <?php endwhile; endif; ?>

        </ul>


我在使用jQuery代码:

<script src="<?php bloginfo(\'template_directory\'); ?>js/jquery.quicksand.js"></script>
  <script src="<?php bloginfo(\'template_directory\'); ?>js/jquery.easing.js"></script>
  <script>

    jQuery.noConflict();
jQuery(document).ready(function($){
    // Clone applications to get a second collection
    var $data = $("#portfolio-items").clone();

    //NOTE: Only filter on the main portfolio page, not on the subcategory pages
    $(\'#portfolio-terms ul li\').click(function(e) {
        $("ul li").removeClass("active");   
        // Use the last category class as the category to filter by. This means that multiple categories are not supported (yet)
        var filterClass=$(this).attr(\'class\').split(\' \').slice(-1)[0];

        if (filterClass == \'.all current\') {
            var $filteredData = $data.find(\'#portfolio-\');
        } else {
            var $filteredData = $data.find(\'#portfolio-[data-type=\' + filterClass + \']\');
        }
        $("#portfolio-items").quicksand($filteredData, {
            duration: 800,
            easing: \'swing\',
        });     
        $(this).addClass("active");             
        return false;
    });
});

  </script>
但不起作用。这里是我的主题测试:http://stakk.it/

有人能帮我吗?非常感谢。

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

不确定这完全是您的问题,但您在这里有一个语法错误:

<script src="<?php bloginfo(\'template_directory\'); ?>js/jquery.easing.js"></script>
。。。您需要将尾部斜杠添加到bloginfo(\'template_directory\'), 像这样:

<script src="<?php bloginfo(\'template_directory\'); ?>/js/jquery.easing.js"></script>

EDIT

查看浏览器源代码,循环标记工作正常,但quicksand脚本链接似乎没有输出到任何地方。你在哪里,怎么称呼它?

EDIT 2

可以the quicksand script is loading now; 然而it appears to be using a jQuery no-conflict mode format that will cause it to execute immediately, rather than on document.ready. 您可以尝试更改此格式:

(function($) {
    // quicksand script
})(jQuery);
。。。对此:

jQuery(document).ready(function($) {
    // quicksand script
});
另外:您正在加载大量脚本。我会确保它们正确级联,以便相关脚本在其依赖项之后加载。

Note: using wp_enqueue_script(), which includes a $deps argument, is especially helpful here, and is the best-practice implementation for enqueueing scripts.

结束