砌體，FlexSlider和無限滾動

我正在使用masinry和加載無限滾動jQuery插件的內容，並在這個內容中我有不同的FlexSlider幻燈片。當我使用無限滾動時，滑塊不能正確顯示，下一篇文章就位於同一位置，就像砌體不加載flexslider帖子一樣。我認爲FlexSlider jQuery無法正常加載無限滾動。這是代碼：砌體，FlexSlider和無限滾動

FlexSlider：

<script>jQuery(document).ready(function ($) { 
    $(\'#' . $id . '\').flexslider({ 
    namespace: "flex-",    
    selector: ".slides > li", 
    animation: "' . $animation_effect . '", 
    direction: "horizontal",    
    animationLoop: true,     
    slideshow: true, 
    slideshowSpeed:' . $slideshow_speed . ', 
    animationSpeed:' . $animation_speed . ', 
    pauseOnAction: true,  
    pauseOnHover: true, 
    useCSS: true,  
    touch: true, 
    video: true, 
    controlNav: false, 
    directionNav: false, 
    prevText: "", 
    nextText: "", 
    });});</script>

砌體+無限滾動：

<script>   
     jQuery(document).ready(function($){ 
      var $container = $('#masonry-content'); 

      $container.imagesLoaded(function(){ 
       $container.masonry({ 
       itemSelector: 'article', 
       columnWidth: 1, 
       }); 
      }); 

      <?php if($missiony_options['archives_infinite_scroll'] == 1) { ?> 

      $container.infinitescroll({ 
       navSelector : '.archive-nav', // selector for the paged navigation 
       nextSelector : '.archive-nav .next', // selector for the NEXT link (to page 2) 
       itemSelector : '#masonry-content article',  // selector for all items you'll retrieve 
       loading: { 
        finishedMsg: 'No more pages to load.', 
        img: 'http://i.imgur.com/6RMhx.gif', 
        msgText:'', 
       } 
       }, 
       // trigger Masonry as a callback 
       function(newElements) { 
       // hide new items while they are loading 
       var $newElems = $(newElements).css({ opacity: 0 }); 
       // ensure that images load before adding to masonry layout 
       $newElems.imagesLoaded(function(){ 
        // show elems now they're ready 
        $newElems.animate({ opacity: 1 }); 
        $container.masonry('appended', $newElems, true); 
        $("a[rel^='prettyPhoto']").prettyPhoto(); 
        $('#slider-74').flexslider(); 
        }); 
       }); 
      <?php } ?> 
     }); 


    </script>

的JavaScript是內嵌在網頁上，因爲我使用一些PHP變量。就像你可以看到的，我在加載infinete滾動，以及imageLoader和prettyPhoto之後，向砌體添加了新的元素。我試圖用FlexSlider做這樣的事情，但沒有。如何實現這一目標？請幫助！

This is the web.

來源

2014-02-11 ThemesCreator

你有語法錯誤 - 請嘗試debbuger

來源

2014-02-11 12:09:47 user2886352

dreanweaver不會顯示任何語法錯誤 – ThemesCreator

我有同樣的問題，但我不使用磚石。

這裏的無限滾動的工作示例+ Flexslider :)

$('.category-product-wrapper ul.products').infinitescroll({ 
     loading: { 
      img: templateDir+"/images/preloader.gif", 
      finishedMsg: "<i class='fa fa-check-circle-o'></i> Content loaded.", 
      msgText : "", 
      speed: 'slow', 
       }, 
     animate  : false,  
     nextSelector : "ul.page-numbers a:first", 
     navSelector : "ul.page-numbers", 
     itemSelector : ".product-block", 
     bufferPx  : 5, 
    },function(){ 
    // callback when new content is successfully loaded in. 
    $('.product-thumb .flexslider').flexslider({  
     animation: "slide", 
     useCSS : false, 
     slideshow: false, 
     controlNav: false, 
     directionNav: true, 
     controlsContainer: '.flex-container', 
     }); 
    });

基本上，我們需要初始化滑塊時，增加了新的內容，因爲Flexslider通常在頁面加載inits。

希望這有助於！乾杯。

來源

2014-02-17 22:48:10 stefanue

嘗試改變這一行到：

$('#slider-74').flexslider();

與

$('#slider-74').flexslider({ 

animation: "slide" 

       })

取代flexslider的這個初始化必須砌築方法之後。

最好的問候！

來源

2014-09-06 09:50:52 Eldo

砌體，FlexSlider和無限滾動

回答

相關問題