In which we figure out the issues we were having with getting the column layout to load in nicely. The fix was to remove the CSS that was making the aspect ratio abiding placeholder boxes work once the image loads (which holds aspect ratio all by itself). Then apply a CSS class to make the “fade in” work (changing opacity from 0 to 1). Easy cheesy and just a dollop of JavaScript.
It should be noted that on the live version of the site unfortunately this cool technique wouldn’t work. In order for it to be really effective, we need to know the aspect ratio of the image server-side, we can can create the grid instantly with the correct placeholders. Unfortunately we don’t have that information available to us in the real gallery. We can use PHP to get the dimensions, but it’s very slow. Instead, we wait for all the images to load and then fade in their opacity. Not quite as cool and a bit slower, but at least less loading janky-ness.
Cool solution. I probably would have waited for all images to load and just fade them all in, but this is a much cooler way of doing it.
This video is powerful. The information about using your seamless responsive grid + tricking the images to maintain a future size and then jquerying the opacity to get the fade in effect. Loving the videos…I’m watching everyone all the way through. These videos are way better than a college education.
I am banking on your last statement John. But I am still going to school as well :)