Explosive cocktail of jQuery plugins you probably are very used to seeing around the web and didn’t know.
In a nutshell, Isotope, the chemical arrangement by David Desandro, helps create a grid style layout with totally out of the box responsive and fluid properties and many options; Infinite Scroll, by Paul Irish, will ease the navigation not having to click through pages anymore (yes, you’re right, just like Google images, Twitter, Facebook, Pinterest…); Inview, by Protonet, applies some nice effects to the blossoming content; and finally Lightbox, by Lokesh Dhakar provides an overlay to display full screen images when clicked.
I’ve been dealing with them for the past few days just for the sake of playing around and, as Desandro himself says, I “hit a brick wall [or several], like ‘this shit ain’t never gonna work’, but you were [I was] so deep in the trenches that you’d [I’d] rather die with you eyelids open staring at code than to admit defeat“. It’s 6am right now and I just finished tweaking the gallery I wanted to do, so yeah, that description is totally applicable.
So, for my own comfort of having it written and for anyone facing an Isotope like implementation. Follow these pages for a step-by-step explanation on how to install a simple gallery of pictures to scroll down infinitely.
Here’s a zip with the file resulting project:
- Page 2: Basic structure and styling
- Page 3: Activating Isotope
- Page 4: Applying an Infinite Scroll
- Page 5: It’s Inview’s turn
- Page 6: Lightbox
- Page 7: And here comes the trouble: WordPress
- Page 8: Entire One Page Code for the example