jQuery无限滚动中的masonry回调在Wordpress中不起作用 - 也不是无限滚动插件 [英] Masonry callback in jQuery infinite scroll isn't working in Wordpress - and neither are infinite scroll plugins

问题描述

我有很多问题围绕着masonry和无限滚动的组合在Wordpress，即在此页面上。

I've got a ton of problems surrounding the combination of Masonry and infinite scrolling in Wordpress, namely on this page.

我收集到Masonry使用无限滚动需要在无限滚动jQuery代码中的回调 - 这似乎是已经确定的。但是，我只能在非常特定的情况下，似乎在我的Wordpress网站上工作的无限滚动，并且鉴于这些情况，我不知道如何集成Masonry。

I gather getting Masonry to work with infinite scrolling requires a callback within the infinite scroll jQuery code - this seems to be well-established. However, I can only seem to get infinite scrolling working on my Wordpress site under very specific circumstances, and given those circumstances I'm not sure how to integrate Masonry.

代码是从Masonry.js网站的无限滚动演示中借用的，现在位于页脚：

This code is borrowed from the Masonry.js website's infinite scroll demonstration and is in the footer right now:

<script>
  $(function(){

    var $container = $('.et_pb_blog_grid_wrapper');

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

    $container.infinitescroll({
      navSelector  : '#nextposts',    // selector for the paged navigation 
      nextSelector : '#nextposts a',  // selector for the NEXT link (to page 2)
      itemSelector : '.post',     // selector for all items you'll retrieve
      loading: {
          finishedMsg: 'No more pages to load.',
          img: 'http://dearjackalope.com/juliaproblems/wp-content/themes/juliamariani/images/ajax-loader.gif'
        }
      },
      // 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 ); 
        });
      }
    );

  });
</script>

问题是，即使它在静态HTML中工作，但在此页面上没有任何效果，我不知道为什么！这是什么工作：

The problem is, even though it works in static HTML, on this page it doesn't have any effect and I have no idea why! What does work is this:

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":".post",
        "contentSelector":".et_pb_blog_grid_wrapper"
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    </script>

但我不知道如何添加Masonry回调 - 在回调看起来完全不同于这（我知道美元符号是在jQuery中定义，它出现在回调但不是在原始代码 - 我不知道这是否重要吗？），我不知道在函数中它需要去。我试过：

But I'm not sure how to add the Masonry callback to this - the way the variables are declared in the callback looks quite different from this (I know that the dollar sign is defined in jQuery and it appears in the callback but not in the original code - I'm not sure if this matters?), and I'm not sure exactly where in the function it needs to go. I've tried:

<script>
var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"
        },
        // hide new items while they are loading
        var $newElems = jQuery(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 );
        });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
</script>   

，并声明一个新函数：

<script>
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_stylesheet_directory_uri(); ?>/images/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":"#nextposts a",
        "navSelector":"#nextposts",
        "itemSelector":"article.post",
        "contentSelector":".et_pb_blog_grid_wrapper"        
    });
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );
    function newElements()  // hide new items while they are loading
        var $newElems = jQuery(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 );
    </script>

这两个都不工作，所以我不知道我应该把回调，或者如果有一些关于原始代码，意味着回调赢得了我已经花了大约8个小时阅读通过Javascript教程和文档，我不知道接下来要做什么：（

Neither of these work, so I'm not sure where I'm supposed to be putting the callback, or if there's something about the original code that means the callback won't work. I've spent about eight hours reading through Javascript tutorials and documentation and I'm not sure what to try next. :(

有一个现在不支持，但仍然看起来广泛使用，称为无限滚动的插件，其中包括一个复选框Masonry模式，但是当我尝试安装它没有什么 - 它似乎没有加载任何代码到页面，所以，可能值得注意的是，我还发现Jetpack无限滚动功能没有加载任何代码，无论什么，即使完全设置的主题，因此我似乎被限制为非插件代码在这里。

There is a now-unsupported, but still seemingly widely-used, plugin called Infinite-Scroll which includes a checkbox for 'Masonry Mode', but when I tried installing it I got nothing - it didn't appear to load any code into the page at all, so that doesn't appear to be an option here. It's possibly worth noting that I also found the Jetpack infinite scroll feature loaded no code into the page whatsoever even after fully setting up the theme for it, so I seem to be limited to non-plugin code here.

我的主题是否有根本错误，导致所有这些问题？我的Javascript是初学者水平的，最好的，我真的很难知道从哪里去 - 任何帮助将非常感激。

Is there something fundamentally wrong with my theme that's causing all these problems? My Javascript is beginner-level at best and I'm really struggling to know where to go from here - any help would be much appreciated.

推荐答案

确定，所以它看起来像这个整个问题源自的事实，Wordpress不理解$作为一个jQuery变量，因为其jQuery的默认入列版本以无冲突模式运行。

OK, so it looks like this whole issue stemmed from the fact that Wordpress doesn't understand $ as a jQuery variable since its default enqueued version of jQuery runs in no-conflict mode.

用'jQuery'替换所有的'$'符号解决了问题，或者你可以将它包装在一个函数中，并将其映射到$这是我做的 - http://digwp.com/2011/09/using -instead-of-jquery-in-wordpress /

Replacing all the '$' signs with 'jQuery' solves the problem, or you can wrap it in a function and map it to $ like this which is what I did - http://digwp.com/2011/09/using-instead-of-jquery-in-wordpress/

不知道我错过了这个，但如果其他人有困难无限滚动工作在Wordpress ，它工作像一个魅力后几个小时的困惑，为什么它不工作！

Not sure how I missed this, but if anyone else is having difficulty getting infinite scrolling working in Wordpress, it worked like a charm after hours of puzzling over why it wasn't working!

这篇关于jQuery无限滚动中的masonry回调在Wordpress中不起作用 - 也不是无限滚动插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！