Taken from author Terry Mun’s website:
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.
wp_enqueue_style( 'cover-style', get_template_directory_uri() . '/css/fluidbox.css' );
.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.)
wp_enqueue_script( 'fluidbox', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array(), false, true );
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.
But then I found another wrinkle: the plugin doesn’t add
rel="lightbox" to the image’s link; it adds
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.