I discovered an awesome jQuery plugin yesterday, called Fluidbox. I have since implemented it in my Cover theme for WordPress.
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.
The styles
There are two parts to Fluidbox: CSS and JavaScript. The CSS is simple enough, and it would have been easy enough to add this line to Cover’s functions.php:
wp_enqueue_style( 'cover-style', get_template_directory_uri() . '/css/fluidbox.css' );
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:
@import "Fluidbox/fluidbox";
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.)
The script
It is on my to-do list, but I have not yet gotten around to configuring Grunt to concatenate all my JavaScript into one file (similar to how I already have for the stylesheet), so I just added this line to the functions.php:
wp_enqueue_script( 'fluidbox', get_template_directory_uri() . '/js/jquery.fluidbox.min.js', array(), false, true );
All the pieces are in place; now there is just the matter of utilizing this new code. I added this line to the end of Cover’s JavaScript file (which is minified by Grunt before deployment):
jQuery('a[rel="lightbox"]').fluidbox();
This will target any linked image with the rel attribute with a value of “lightbox”, turning it into a working Fluidbox image.
Automation
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 rel="lightbox[post-xx]" (where xx is the post’s unique identifier). This caused my initial JavaScript to break, so I amended it to this:
jQuery('a[rel^="lightbox"]').fluidbox();
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.
Leave a Reply