Smart Ways to Use FooBox

As the Solutions Manager for FooPlugins, I’ve seen my fair share of sites using FooBox. There’s tons of them! People love the plugin. It’s easy to use, it looks great on basically any website you stick it on, and it gives a real sense of that elusive “pop” and professionalism that everyone craves for their sites.

But with everything that’s awesome, too much of a good thing can turn the whole batch sour (trademark phrase, use it at your own risk).

It’s like maple syrup on pancakes. If you drown them, they get soggy and just too syrupy. Or when a new meme comes out and you start to see it EVERYWHERE and eventually it looses it’s original wit and meaning all together. That can happen with any awesome front-end plugin, including FooBox.

So, this post is just my personal take on how to use the plugin to its best without making it overly syrupy or kitchy.

Target it very narrowly

One of the great features of FooBox is its ability to target specific classes or specific galleries. You can cast your net really wide and target your whole content area, but that is exactly the non-smart way of using FooBox. Instead, think about your content and how you want to use images in your posts and pages. Are you going to have a gallery in many or all of your posts? If yes, just target the gallery.

If you think you’re just going to have one featured image associated with 99% of your posts, then I’m not sure what you’ll gain by adding FooBox to those images. For example, if your theme automatically places your featured image into the top portion of your article, floated left, and just the right dimensions, why do your users need to see that exact same image in a modal? That’s right. They don’t. But, if you know that you’re going to be loading some large images into your article and placing them into the text will loose the flow of the article, then here’s a few ways you can utilize FooBox the “smart” way:

1. Make sure to insert the full size version of the image and float it left. But then, after it’s placed, go to edit it and reduce it to maybe 60% or so of it’s size. Now, it appears on the page smaller, and when it’s loaded in FooBox it’s a good fullsize image that takes up the screen responsively.
2. Give your users the option to ignore the image if they want to. People love choice. The best way to do that is to load the image as a hyperlink. Like, I’d love for you to see a shot of one of my favorite glasses of homebrew. Click the link and you’ll see it — or ignore it if homebrew makes your mouth water too much. FooPlugins has a great tutorial on how to accomplish that right here.

Let the content of FooBox help drive your story

Some modern web trends are training common users to click on basically any image they see nowaday. If every image in your post launches FooBox and you haven’t added something to your article narrative, then the modal just becomes a distraction. Instead, provide additional information in the FooBox caption of the image. Instead of placing a caption on the photo, put it in the alt or title tag where only FooBox picks it up.

Use Gallery Thumbnails

The NextGen Gallery, WordPress default Gallery, and the Jetpack tiled gallery each have options to show just a thumbnail of your images rather than the whole image. Do that and let FooBox showcase the full image. This is great for allowing people to skip to the photo they are most interested in by browsing the thumbnails and then having the real “pop” effect when it’s in FooBox. There’s a great example of this at one of my clients sites, the Family and Learning Center. They showcase hand-written notecards from their grateful families for their services.

Another more advanced way to do this is to load a whole gallery in FooBox from just one thumbnail. Currently, NextGen Gallery is the only gallery plugin we know that can do this well. FooPlugins has a detailed tutorial on how to do that. You can see it in action at one of my clients sites, the Delta Bohemian.

Load a Gallery from a Hyperlink

Now, I’m cheating a little here. This isn’t really a documented feature, it’s more of an extension that developer Brad Vincent gave me a heads up on. To add this code, go to your FooBox settings, to the “JS & CSS” tab, and insert this into the “Custom Javascript (Post)” field:

jQuery(function() { 
  jQuery('.footrigger').click(function(e) { e.preventDefault();
  var div = jQuery(this).attr('href'); 
  jQuery(div).find('a:first').click(); 
  }); 
});

Then insert a gallery into you post/page, and surround it with this markup:

<a class="footrigger" href="#foohiddengallery">Test Gallery from hyperlink</a>
<div id="foohiddengallery" style="display: none;">[your gallery shortcode here]</div>

And you can load a WordPress Gallery from a hyperlink, like this.

(p.s. It seems this route of launching FooBox is a little more finicky than the standard. I had a hard time getting it running right because I include my own version of jQuery in my theme. So if that’s the case for you, go to your FooBox settings, under “Advanced” and make sure “Don’t Include jQuery” is checked. That way only one version of jQuery is loaded. That’s honestly a really awesome and “developer friendly” setting that FooBox built in.)

Miscellaneous Tips

• Watch for a follow-up to this post after Version 2 of FooBox comes out. There’s going to be some serious HTML and Video action. Lots more ways to do some smart FooBoxing!
• I’ve seen some great custom CSS jobs to make it integrate with the site theme well. If you’re not planning on doing serious CSS customization, go with “Force Fullscreen mode”, it’s gorgeous right out of the box and is basically the un-style option.
• If you’re using the Facebook sharing option, do the Feed API. It’s just the most reliable method.
• If you’ve got a ton of images on your site and want to know exactly which ones are being viewed, email us through the support forum and ask for a demo copy of the Google Analytics extension. It’ll give you page view and Image view Event data right in your Analytics dashboard.

Other Great Examples of FooBox Usage

• walkingdeadcomics.org did a great job customizing their FooBox CSS to match their site perfectly.
• CityHeights Runners loads FooBox in a Facebook Page Gallery plugin. So any new images uploaded to that gallery on Facebook get added to the Gallery and loaded in FooBox on click automatically. Pretty slick! (p.s. They’re a great local non-profit client/friend of mine).
• The Delta Bohemian uses FooBox on their site in two different ways. I already mentioned they’re great usage of the NextGen thumbnail technique. They also load FooBox on a JetPack tiled image gallery here — a gorgeous showcase of a local bed and breakfast.