砌体、FlexSlider 和无限滚动答案

【问题标题】：Masonry, FlexSlider and infinite scroll砌体、FlexSlider 和无限滚动
【发布时间】：2014-02-11 08:37:44
【问题描述】：

我正在使用 masinry 并使用无限滚动 jQuery 插件加载内容，在此内容中，我有不同的 FlexSlider 幻灯片。当我使用无限滚动时，滑块无法正确显示，下一个帖子位于同一个位置，就像砌体不加载 flexslider 帖子一样。我认为 FlexSlider jQuery 不能很好地加载无限滚动。这是代码：

弹性滑块：

<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 变量。如您所见，我在加载无限滚动后将新元素添加到 Masonry，并且还添加了 imageLoader 和 prettyPhoto。我试图用 FlexSlider 做这样的事情，但没有。怎样才能做到这一点？请帮忙！

This is the web.

【问题讨论】：

标签： javascript jquery slideshow infinite-scroll

【解决方案1】：

您有语法错误 - 请尝试调试器

【讨论】：

【解决方案2】：

我有同样的问题，但我没有使用 Masonry。

这是无限滚动 + 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 通常在页面加载时初始化。

希望这有帮助！干杯。

【讨论】：

【解决方案3】：

试着把这行改成：

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

替换为

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

 animation: "slide"

                })

flexslider的这个初始化必须在masonry方法之后。

最好的问候！

【讨论】：