我一直在尝试让这个插件工作,但我失败了。我有如下代码:
这个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/有人能帮我吗?非常感谢。
最合适的回答,由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.