New JQuery Update Broke Masonry Grid Layout

I am using a masonry layout JS plugin on a few of my sites and it broke with upgrade to JQuery 3.3.1. The images no longer arrange themselves in the masonry/pinterest style.

This is where is got the JS:

You can see it in action in the Portfolio section of this site:
https://preview.webflow.com/preview/imageryana?preview=92707ac421d3c182f5bd6132b29cd8c2

Does anyone have any suggestions on how to get this back to operational?

So, the workaround is to call JQuery 2.2 from the custom code section of settings. However, I would greatly appreciate any suggestions on how to get this working for 3.3.1.

This is what I added:

<script src="https://code.jquery.com/jquery-2.2.0.min.js" integrity="sha256-ihAoc6M/JPfrIiIeayPE9xjin4UWjsx2mjW/rtmxLM4=" crossorigin="anonymous"></script>

2 Likes

Hey @GoldenRatio. I apologize that I’m not contacting you with a solution for getting this to work with 3.3.1, but I’m having the same issue with a before and after image comparison plugin called Twenty Twenty by a company named Zurb. I called 2.2.0 like you suggested and it works! I really appreciate that, but it would be nice to know what’s needed in order to get these plugins to work with the new update.

If you don’t mind keeping me posted with what you hear I would appreciate that. I will do the same if I figure anything out. Seems like something the developers would want to take care of, but I’m sure they are super busy and it may or may not be a time-consuming fix.

Take care!

Hey @GoldenRatio

In the announcement notes of 3.3.1, make sure to read the Jquery 3.0 Core update guide.

It lets you know which jquery syntax has changed. The three most relevant are;

.load(function() becomes .on(“load”, function()

Same format goes for .load() and .unload()

You can use jquery 3 migrate plugin but you will need to learn the syntax eventually. Hope this helps.

1 Like

Thanks, Alex! Good to know!