How to make jQGreyScale work with Masonry's infinitescrolling?

Question

I'm working on a blog theme and I need help. I have two scripts running, masonry and greyscale. They both work, except when infinitescrolling (part of masonry) adds the new photos to the page, the new photos aren't in greyscale mode. You can see this live at http://jamestestblog4.tumblr.com. Here is the code I'm using. If anyone can help, that'd be fantastic. I'm new to JQuery and don't know what to do.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www.pryde-design.co.uk/projects/jQGreyScale/greyScale.js"></script>
<script>
      $(function() {
        $('.greyScale').hide().fadeIn(1000);
      });
      $(window).load(function () { 
        $('.greyScale').greyScale({
          fadeTime: 500
        });
    });
</script>

{block:IndexPage}
<script src="http://masonry.desandro.com/jquery.masonry.min.js"></script>
<script src="http://masonry.desandro.com/js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $container = $('#content');
$container.imagesLoaded(function(){
$container.masonry({
itemSelector: '#entry',
isAnimated : true
});
});

$container.infinitescroll({
navSelector : '#page-nav',
nextSelector : '#page-nav a',
itemSelector : '#entry',
loadingImg : "http://static.tumblr.com/kwz90l7/bIdlst7ub/transparent.png",
loadingText : " ",
donetext : " ",
isAnimated : true
},

function( newElements ) {
var $newElems = $( newElements ).css({ opacity: 0 });
$newElems.imagesLoaded(function(){
$newElems.animate({ opacity: 1 });
$container.masonry( 'appended', $newElems, true ); 
});
}
);

});
</script>
{/block:IndexPage}

Make sure to keep an eye on your JS Console. Your page is throwing about 100 errors *a second* right now. — Ansel Santosa, Jan 07 '12 at 18:42
You should be. If parts of your code are fatally failing, they could be preventing other parts from executing at all. Without fixing that error you can't rule it out as an indirect cause of your problem. — Ansel Santosa, Jan 08 '12 at 02:02

score 2 · Accepted Answer · answered Jan 07 '12 at 18:35

I think you should change your newElements callback to something like this:

function( newElements ) {
    var $newElems = $( newElements ).css({ opacity: 0 });
    $newElems.imagesLoaded(function() {
        $newElems.animate({ opacity: 1 });
        $container.masonry( 'appended', $newElems, true ); 
        $newElems.greyScale({
            fadeTime: 500
        });
    });
}

How to make jQGreyScale work with Masonry's infinitescrolling?

1 Answers1