Trying to implement with animations and masonry

Ross Moderator

#49672

Ah is that the contents of your JS file exactly? Then you probably just need to wrap it in a function call or ready event, I would do it like:

(function ( $ ) {
	
	"use strict";

	$(function () {
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			
			//so load your lightbox or JS scripts here again
		});
	});
			
}(jQuery));

Let me know how you get on.

Thanks

Anonymous

#49926

That is the contents of the JS file. I am unsure what you mean by wrap it in a function.

Ross Moderator

#49957

So your current JS file looks like this as you mention:

//detects the start of an ajax request being made
$(document).on("sf:ajaxstart", ".searchandfilter", function(){
  console.log("ajax start");
});

//detects when the ajax request has finished and the content has been updated
// - add scripts that apply to your results here
$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
	console.log("ajax complete");
	
	//so load your lightbox or JS scripts here again
});

//an event fired when S&F is initialised and S&F scripts have been loaded
$(document).on("sf:init", ".searchandfilter", function(){
	console.log("S&F JS initialised");
});

Replace that with:

(function ( $ ) {
	
	"use strict";

	$(function () {
		//detects the start of an ajax request being made
		$(document).on("sf:ajaxstart", ".searchandfilter", function(){
		  console.log("ajax start");
		});

		//detects when the ajax request has finished and the content has been updated
		// - add scripts that apply to your results here
		$(document).on("sf:ajaxfinish", ".searchandfilter", function(){
			console.log("ajax complete");
			
			//so load your lightbox or JS scripts here again
		});

		//an event fired when S&F is initialised and S&F scripts have been loaded
		$(document).on("sf:init", ".searchandfilter", function(){
			console.log("S&F JS initialised");
		});
	});
			
}(jQuery));

You can see the same code exists, but just wrapped in a function.. 🙂

Anonymous

#54443

Finally got this working!

console.log(“ajax complete”);

$(‘#ms-container’).imagesLoaded( function() {
var container = document.querySelector(‘#ms-container’);
var msnry = new Masonry( container, {
itemSelector: ‘.ms-item’,
columnWidth: ‘.ms-item’,
isAnimated: true,
});
});

});

Thank you for all your help!!

[Author]

Posts