1
我正嘗試與Caroufredsel一起使用同位素,但沒有成功。「同位素」與「CarouFredsel」不能很好地發揮作用
我使用:
HTML + WP:
事實上同位素和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和同位素....
<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>
感謝
我覺得Desandro紈絝子弟,背後同位素,暫停發展,https://github.com/desandro/isotope/blob/master/CONTRIBUTING.mdown 我也嘗試流沙,該做的工作,但不我想如何,所以我最終使用幾個carufredsel :( – Locke 2013-03-23 16:07:24