Geek asks and answers

JQuery Masonry callback not working

I'm trying to get a callback function to execute when jQuery Masonry has done its positioning way, preventing jerky content from appearing in my code.

For testing purposes, however, I use a simple warning that is not triggered at all.

var $jigsaw = $('#jigsaw');

$jigsaw.imagesLoaded( function(){
    $jigsaw.masonry({
     columnWidth : 180,
      isAnimated : !Modernizr.csstransitions,
     isResizable : true,
    itemSelector : '.piece'
    }, function(){
        alert('Completed');
    });
});

Maybe I'm missing something obvious, but any help would be appreciated

+3
source share
4 answers

Callbacks with Masonry v2.0 are undocumented and not entirely supported.

But callbacks are awesome with Isotope v1.5! If you need the right callbacks that fire after the transition or animation finishes, Isotope is the way to go.

, CSS jQuery . , , , , .

+3

, jQuery. jQuery 1.5+, :

$.when($jigsaw.masonry(options)).then(function(){/*callback function*/});
+14
// Create the callback function
var callback = function($el, cb) {
  var instance = $.data($el, 'masonry');
  if (!instance) {
    setTimeout(callback($el, cb), 300);
  } else {
    cb();
  }
}

// Then simply add this to your imagesLoaded for an element of '.thumbnails' or something
callback('.thumbnails', function() {
  // some code goes here
});
+1
source

I tried this and it worked

jQuery.when( $jigsaw.masonry('reload') ).done(function(x) { 
    //call back logic 
});
0
source

More articles:


All Articles