search

codrops / ThumbnailGridExpandingPreview

A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images.
360 stars 143 forks source link

Doesn't work with JQuery 1.11 #11

Open robins36 opened 10 years ago

robins36 commented 10 years ago

I've had good experiences using this plugin with Wordpress sites running JQuery 1.9, but the latest version of Wordpress uses JQuery 1.11, which seems to break the plugin. I get these issues that I did not get before using the older version of JQuery:

1). Uncaught TypeError: Cannot read property 'event' of undefined screen shot 2014-06-03 at 10 49 50 am

2). Uncaught TypeError: undefined is not a function screen shot 2014-06-03 at 10 50 45 am

Is there any chance of updating the code to work with JQuery 1.11?

icacho-dev commented 9 years ago

Same here, would be really great, any idea how?

mathetos commented 8 years ago

It's not an issue with jQuery. If you download the source files and just swap out the jQuery version to 1.11.0 you'll see that it still works perfectly fine. I was able to get it up and working by doing the following:

  1. Update the debouncedresize and imagesloaded scripts to their latest versions from their Github repos. Both those scripts are pasted directly into the grid.js file and probably should just be separated out and loaded indiviudally.
  2. Make sure you are loading the modernizr in the head, and the grid in the footer, that both are loaded AFTER jQuery and that the INIT is loaded after all of them in the footer.
  3. I went through the var Grid = function() variable and removed all the $ variables and swapped out the $ when it was a shortname for jQuery. This ensures that the script is loaded in no-conflict mode which WordPress enforces for all jQuery scripts.

This is my result: https://gist.github.com/mathetos/f70513bfe71fef9c2306

I'm not a JS pro, but that's basically how I got it working with WordPress 4.4.