我正在尝试将 Isotope 与 Caroufredsel 一起使用,但没有成功。
我在用着:
HTML+WP:
事实上,Isotope 和 Caroufredsel 使用相同的 ID,这是主要冲突。
<section class="products">
<nav id="f1" class="usNavi">
<div class="wrap">
<ul id="filter" class="filter" data-key="filter">
<li><a href="#" data-filter="*">Todos</a></li>
<li><a href="#" data-filter=".p-10">EcoLife Technologies</a></li>
<li><a href="#" data-filter=".p-6">SilverLine</a></li>
<li><a href="/productos/">Regresar</a></li>
</ul>
</div>
</nav>
<div id="heaters">
<div class="arrow-nav">
<a id="left" class="left" href="#"></a>
<a id="right" class="right" href="#"></a>
</div>
<ul id="carrusel" class="carrusel clearfix">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php
$cat = get_the_category();
?>
<li class="product <?php foreach($cat as $cate){
$id = $cate->cat_ID;
echo "p-$id";
}
?> heater-<?php the_ID(); ?>">
<figure class="clearfix">
<?php the_post_thumbnail(); ?>
</figure>
<h2><?php the_title(); ?></h2>
<h3><?php get_spec_0_1(); ?></h3>
<h4><?php get_spec_6_1(); ?></h4>
<a href="<?php the_permalink(); ?>">Ver</a>
<small>
Uso Recomendado para
<figure class="clearfix">
<?php get_spec_300(); ?>
</figure>
<strong>personas.</strong>
</small>
</li>
<?php endwhile; endif; ?>
<?php wp_reset_query(); ?>
</ul>
</section>
这就是我如何称呼 CarouFredsel 和 Isotope....
<script>
jQuery(function($) {
var _onBefore = function() {
$(this).find('li').stop().css('opacity', '0.25' );
};
var _onAfter = function() {
$(this).find('li').stop().css('opacity', '1' );
};
//isotope
var $container = $('#carrusel');
$('#filter a').click(function(){
var selector = $(this).attr('data-filter');
$container.isotope({
filter: selector,
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
return false;
});
$container.isotope({
filter: '*',
animationOptions: {
duration: 750,
easing: 'linear',
queue: false
}
});
$("#carrusel").carouFredSel({
auto : false,
width: '100%',
height: '100%',
scroll: {
duration: 750
},
prev: {
button: "#left",
key: "left",
items: 2,
onBefore: _onBefore,
onAfter: _onAfter
},
next: {
button: "#right",
key: "right",
items: 2,
onBefore: _onBefore,
onAfter: _onAfter
}
});
});
</script>
谢谢