Make Responsive Lightbox by dFactory Work with FooGallery

Share this!

Make Responsive Lightbox by dFactory Work with FooGalleryThis is a repurposing of an earlier blog article, First Look at Foo Gallery. I wanted to make it easy for people to find this solution for making FooGallery and Responsive Lightbox by dFactory work together.

Out of the box, the only lightbox plugin These are what make thumbnails enlarge in modal windows FooGallery supports is its own, FooBox. But I’ve become a big fan of Responsive Lightbox by dFactory (RLBD), whose free version offers many useful features (including video support) that you can’t get with the free version of FooBox.

Typically, and by default, Responsive Lightbox by dFactory jumps into action whenever the browser loads an image that contains a data-rel attribute with a value of lightbox. Also, one of the configuration options for RLBD is to automatically insert that attribute-value pair inside img tags. However, FooGallery defeats that process. So we need a workaround.

The Snippet to make Responsive Lightbox by dFactory work with FooGallery

(Hat-tip to one of the FooGallery plugin authors who offered this solution in the plugin’s support forum.)

To make Responsive Lightbox by dFactory work with FooGallery, use the following code to hook into one of FooGallery’s filters. Add the code to a file in your site’s mu-plugins folder.

function add_foogallery_link_rel($attr, $args, $attachment) {
	$attr['data-rel'] = 'lightbox';
	return $attr;
add_filter('foogallery_attachment_html_link_attributes', 'add_foogallery_link_rel', 10, 3);

PS: If you’re wondering why I didn’t tell you to put the code in your theme’s functions.php file — or if you’re not familiar with the mu-plugins folder, feel free to comment below.

Share this!


The nSiteful Tech Blog (the official blog of nSiteful Web Builders, Inc. since January of 2013) is where I (Jeff Cohan) and (occasionally) associates will be posting articles of potential interest to like-minded techies, nSiteful clients who are playing active roles in the maintenance of their own Web sites and blogs, and pretty much anyone interested in how Web strategies and tools can help them reach their goals.

This entry was posted in Snippets and tagged , , , , , by Jeff Cohan. Bookmark the permalink.

About Jeff Cohan

Jeff and his wife, Margie, are the proud parents of Sarah and Jake. Jeff is the founder, president and chief cook and bottle washer of nSiteful Web Builders, Inc., a Web development and Internet Consulting firm. In his spare time, Jeff builds Web sites and Web applications, plays guitar, putters around in his basement woodworking shop, mercilessly spoils his grandchildren, and creates videos from more than two decades of home movies. His current video project is an extended montage of people (mainly family members) asking him to stop filming them.

3 thoughts on “Make Responsive Lightbox by dFactory Work with FooGallery

  1. Hi Jeff

    Thanks for the code snippet! I really wanna use FooGallery and Responsive Lightbox as well – it seems to be the best of both worlds 😉 I’m kind of new to this, so I am not familiar with the mu-plugins folder, so if you could elaborate on how to use that it would be great!

    • Thanks for your comment, Rikki.

      The “mu-plugins” folder is a special, optional folder in WordPress whose primary purpose (nowadays) is to house plugins (i.e., script files) that must always be enabled, regardless of which theme is activated. Every file in this folder is considered a plugin, and plugins in this folder do not appear on the default Plugins dashboard page and thus cannot be deactivated by users.

      The folder must be manually created, as it does not exist by default.

      For the use case I described in this post, I want Responsive Lightbox by dFactory to always work with Foo Gallery, regardless of which theme is active. That’s why I didn’t add the code to the theme’s functions.php file.

      For more info, check out this codex article.

Leave a Reply

Your email address will not be published. Required fields are marked *