Multiple layout Masonry

Resolved

(@websim)

Hi
I want to create multiple layouts Masonry on the same page.
I entered the following code:


//loop 2
		var masonryInit = true; // set Masonry init flag
		$.fn.almComplete = function(alm){ // Ajax Load More callback function
			if($('#ajax-load-more-2').length){
				var $container = $('#ajax-load-more-2 .alm-listing '); // our container
				if(masonryInit){
					// initialize Masonry only once
					masonryInit = false;
					$container.masonry({
						itemSelector: '.grid-item',
						percentPosition: true,
						layoutMode: 'masonry',
						gutter: 20
					});		      
				}else{
					$container.masonry('reloadItems'); // Reload masonry items after callback
				}
				$container.imagesLoaded( function() { // When images are loaded, fire masonry again.
					$container.masonry();
				});
			}
		};

		//loop1
		var masonryInit = true; // set Masonry init flag
		$.fn.almComplete = function(alm){ // Ajax Load More callback function
			if($('#ajax-load-more').length){
				var $container = $('#ajax-load-more .alm-listing '); // our container
				if(masonryInit){
					// initialize Masonry only once
					masonryInit = false;
					$container.masonry({
						itemSelector: '.grid-item',
						percentPosition: true,
						layoutMode: 'masonry',
						gutter: 20
					});		      
				}else{
					$container.masonry('reloadItems'); // Reload masonry items after callback
				}
				$container.imagesLoaded( function() { // When images are loaded, fire masonry again.
					$container.masonry();
				});
			}
		};

Only loop 1 works and loop 2 does not work ..
How can I fix it?

Thank you

Viewing 3 replies - 1 through 3 (of 3 total)

Plugin Author Darren Cooney
(@dcooney)

9 years ago
Hi @websim,

You can only use one almComplete function.

What you need to do is get the current ajax load more from the alm object.
```
var masonryInit = true;
$.fn.almComplete = function(alm){
  console.log(alm);	
  var $container = alm.content; // <- This might not be the corrert object. View the console to determine.

  // do stuff here.
};
```
hope this helps.
Thread Starter websim
(@websim)

9 years ago
Thank you
I solved whit this code:
```
var masonryInit = true;
$.fn.almComplete = function(alm){
  var $container = $('.alm-listing'); // our container

  // do stuff here.
};
```
Plugin Author Darren Cooney
(@dcooney)

9 years ago

Ok great. Though I’m surprised that’s working. It’s likely firing masonry on both alm objects. Maybe that’s ok though.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Multiple layout Masonry’ is closed to new replies.