I've been trying to install the masonry.js script on my Squarespace site to make their image galleries look better.
I've installed the script and followed the instructions on the masonry site to the best of my ability. However it's clearly not displaying correctly.
Yet on the gallery page it's just not having it. The differences in html are; in the html page I've used divs, on the gallery page I'm trying to apply this to an ul as the container then to the li elements, is that what's causing the problem? Does masonry 'have' to be divs only?
The only other thing I can think of is if there's other scripts running on the gallery page that are interfering with masonry.
I hope this issue has been framed correctly and I hope someone out there can point out the (hopefully) stupidly simple thing I'm missing as I've thrown a good few hours at this and just can't break it.
Update I've got this working now, you can see an example of it here; http://www.bpicni.com/member-galleries-advanced/donal-mccann-frps/
Possibly a bit hacky, but hey, I'll take.
Essential I used some code to wrap the li elements in divs and then masonry started playing ball. I was then getting the overlap issue and found the only way to fix that was using the $(window).load(function(){ }) method to call the masonry function.
The only problem I have now is a Squarespace specific one, when I'm in content or structure mode, the masonry script is interfering with the functionality on the gallery pages. A quick fix I've found is using the adblock extension to stop the masonry script running. It means I don't get to see the full benefit of the script, but allows me to maintain the site, so that's handy :)
