Search Results for 'masonry'

[Anonymous]

This is how I am pulling it in:

in the footer:
<script src="<?php echo get_bloginfo('template_directory');?>/library/js/masonry.pkgd.min.js"></script>

In the custom results page:

<script type="text/javascript">
 jQuery(window).load(function() {
// MASSONRY Without jquery
var container = document.querySelector('#ms-container');
 var msnry = new Masonry( container, {
itemSelector: '.ms-item',
columnWidth: '.ms-item',                
});  
});
</script>

I am also pulling in:
<script type="text/javascript" src="<?php echo get_bloginfo('template_directory');?>/library/js/sf-pro-ajax-events.js" type="text/javascript"></script>
which contains:

//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");
});

I can’t find anything in the console log that says anything.

[Ross]

Ok, can you share your masonry code here though as requested (Im’ assuming you’ve had to add some JS to initialise it?), just so we can get the code snippet right, and then we can work out where to put it.

Thanks

[Anonymous]

I do have masonry working perfectly without ajax, and am having problems getting the console to log when ajax is start / finished.

[Ross]

Replied over here – https://support.searchandfilter.com/forums/topic/trying-to-implement-with-animations-and-masonry/#post-49545

[Ross]

Hey all

Jumping on these now for anyone having problems with Masonry…

So first thing to do is to get Masonry working when S&F is NOT using ajax – so disable ajax.

This is the same as applying Masonry to any html elements on a page, and it is not really S&F specific anymore – so its good to get this working on your pages before we attempt anything with ajax.

Once this is setup, can you share your masonry initialisation code here? (just the JavaScript code used for initialising Masonry / applying it to certain elements)

Once you do that, I’m sure I can recommend the correct code snippet to perform on an ajax request.

Thanks 🙂

[Anonymous]

I am trying to do the same thing and am having trouble try to get masonry to work on ajax finish. Could you help me out?

[Trevor]

Hi Jason

Great to speak with you. So, you are going to contact the OP from this thread:

https://support.searchandfilter.com/forums/topic/trying-to-implement-with-animations-and-masonry/

And see if he can give you a bit of guidance. Let me know how you get on. If you manage to resolve it, also let me know if I can close the thread?

[Trevor]

How did you call the masonry file into the page before?

What I meant was to put the code that you need from the FAQ page of ours into a file called ….

And the call that from the functions file to load it to the page.

Call me on Skype (make it quick as I have to go out).

[Trevor]

Great to speak with you Jason. I need to get back to you with a method to re-initialize masonry.js after the form has been submitted with Ajax. Right now you have to make a selection watch it change, then refresh the page!!

[Trevor]

Hi Jeremy

Great to talk with you. So, my thoughts were:

#1 Add Enhanced Media Library plugin, so the media has tags and categories.
#2 Discover a method to import media into WP that translates the client’s work of entering keywords on media files and use those keywords as tags.
#3 Explore EML plugin to bulk import media into a category, where that category is the collection name
#4 Create pages to show specific categories in a media masonry grid, where the S&F form can search/filter by media tags making use of the page url to establish the category.