Opening images seamlessly in a lightbox on your page without interruption. This project was originally initiated as a personal challenge to replicate Medium’s lightbox module, but it soon developed into a full-fledged jQuery plugin.
I’ve been looking for a decent image lightbox alternative for a while, and I don’t even remember how I came across this particular gem. But Medium’s method of handling embedded images is glorious. So I downloaded the plugin and implemented it for Cover.
But I like to limit the number of HTTP requests Cover makes, and like I’ve done with the Font Awesome and iDangerous swiper style integrations, I included it into its Sass-compiled stylesheet.
Sass’s .scss syntax is CSS-compatible; any .css file is already a perfectly valid Sass file; I just had to change the extension and include it in the main stylesheet:
With that, the compiled stylesheet now has Fluidbox stylings. (Of course, nothing prevents you from simply including the stylesheet in functions.php, and doing so is perfectly legitimate.)
This will target any linked image with the rel attribute with a value of “lightbox”, turning it into a working Fluidbox image.
It was still kind of a hassle to have to manually add rel="lightbox" to an image. So I did some searching in the WordPress Plugin Directory, and came across add-rel-lightbox. It automatically adds the attribute to any image, but does not add any lightbox functionality — perfect for my uses.
This will match against any link that has a rel attribute whose value starts with, not equals, “lightbox” — allowing it to target the plugin’s modified links.