2013-03-17 66 views
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> 

感謝

回答

0

同樣在這裏,我花了幾個小時,並不能找到一個解決方案。旋轉木馬不會滾動。

我認爲這與同位素將物質轉化爲絕對定位的事實有關。

+0

我覺得Desandro紈絝子弟,背後同位素,暫停發展,https://github.com/desandro/isotope/blob/master/CONTRIBUTING.mdown 我也嘗試流沙,該做的工作,但不我想如何,所以我最終使用幾個carufredsel :( – Locke 2013-03-23 16:07:24

相關問題