By FooBox is a relatively new lightbox plugin for WordPress sites that is responsive and, in my experience so far, works very well across multiple devices. I currently have it installed on a number of websites including this one, and you can see it in action on the single portfolio pages and on a blog post from way back in 2010.
A couple weeks ago I launched the redesign of this site, and as part of that reworking effort I did some experimenting to see if I could speed up my load times by disabling unnecessary scripts and styles. Two blog posts that inspired me in this direction were one by Thomas Griffin on taming Disqus comments and another by Justin Tadlock that covers the topic in general.
Armed with that information I set out to disable scripts and styles on all pages and posts except where I knew for sure they were needed. Along with FooBox, I also worked out solutions for FitVids, JetPack, and VideoPress, but for this post I’m only going to cover FooBox.
FooBox scripts and styles
FooBox is a fairly complex plugin, and it had me scratching my head for a while as I worked out the solution to do this cleanly. In the end I used three different functions that are called at three different hooks which you can see in the code below. Two of the scripts are deregistered at the wp_print_scripts hook, an inline dynamic script is removed at the wp_head hook (which really happens at the wp_print_footer_scripts hook, I suppose), and the style is deregistered at the wp_print_styles hook.
I use a core functionality plugin on all my sites that gets loaded in the mu-plugins directory, and I added the following code to that core plugin.
Here’s the solution I came up with:
Don’t skip this part
foobox.php
The version of FooBox that I’m currently using is 1.3.7, and to disable the inline script that loads in the footer (as set in FooBox options), I had to slightly modify foobox.php by assigning the foobox class to a variable. See the code below:
I made that change based on a recommendation by Otto in an answer he gave on wordpress.stackexchange.com for a related question. I’ve contacted the FooBox developers to see if they’ll make that change in a future version, but for now you’ll have to do it yourself if you want this to work.
Future-proof?
I probably won’t be adding this to my client sites because I’m not sure how future-proof this is going to be. It’s possible that my code will need to be modified depending on what the FooBox developers do in the future with script and style names (and handles).
For example, the handle for the foobox style, currently foobox-1-3-1-min, is generated dynamically by the plugin and I’m anticipating that I’ll have to change that in my code at some future point. This would have been easier if they had just used foobox-css for that handle, but I’m going to assume that they had a good reason for doing it that way.
One thing I’ve learned is that everything I add to a website, especially client sites, increases my future maintenance requirements, and so I find myself carefully evaluating whether or not a new feature or plugin is going to be worth the trouble of maintaining it down the road. In this case, is a slightly faster load time worth the trouble of maintaining this code on all my websites? Probably not. Is it worth it for one or two sites, including this one? Yeah, I think it is.
Just installed this today, and all is well except for one snag: you can’t click the lightboxed photo to advance to the next photo. You can use the on-screen arrows (which I turned off), keyboard arrows, even swiping on touch devices. But to simply click the photo, nothing happens.
Interesting observation. I’m guessing it doesn’t work that way because the user might want to go in either direction, and not just forward?
True, some galleries allow you to click the left and right sides to move back and forward (my own site I’m replacing did this with some php someone wrote for me). But I suspect more people expect clicking the current photo will take them forward. It’s strange to me that this isn’t default behavior in NextGEN Gallery either. For NextGEN I found one solution here: http://tuhrig.de/?p=947. And an alternative was to install Lightbox Plus ColorBox, but FooBox trumps that in most ways other than this issue.
On an aside, do you know if it’s generally fine to store files and folders inside of the WordPress root? Or will they be wiped out upon updates.
The author of that post made a good point about Facebook training its users to click on the photo to advance. You may want to run this by the FooBox developer and suggest adding an option for this behavior.
RE the WordPress root, if you mean the directory that WordPress is installed into, it won’t overwrite anything that isn’t WordPress related when you update, at least in my experience.
FooBox wrote me back stating that currently this is not a feature, but would consider it.
Great, thanks for the advice.
You’re welcome!
Hey guys,
Thanks for both using FooBox and posting this great tut on loading the scripts selectively. This is something we want to build into the next major release of FooBox for sure!
Just regarding the changes you suggest making to foobox.php for assigning the class instance to a variable. This is already changed and released in the most recent version which is available via automatic updates. Version 1.3.7 is quite old already and we are already onto V1.4.* and very soon will be on V2.
Let me know if you would like to play around with the V2 beta – it includes HTML and Video support 🙂
Hey Brad,
Thanks for your comment. Having selective script loading built-in to FooBox would be great, and I’m looking forward to that addition to an already great plugin.
You may have missed it, but this post is six months old already, and I did note at the end of the post in an update that you were going to be making the class change in the next release of the plugin back in March…and thanks for doing that!
John
Hi John,
I’m the Co-founder of FooPlugins with Brad. I thought you might like to know that we’re featuring your site in the responsive site listing demo of our new BrandBar plugin.
That demo page is here: http://brandbar.fooshowcase.com/websites/ and you’ll see your site in the dropdown.
If you choose a mobile device in the upper right, then click one of your portfolio thumbnail images, you’ll find that FooBox works as it should inside our BrandBar too:)
Hi Adam,
Thanks for stopping by, and thank you for featuring my site on your new demo…and along with CSS Tricks and HTML5 Boilerplate?!? I’m sure I’m not worthy, but I’m honored, seriously honored.
BrandBar looks pretty cool – nice job on that. I’ll have to give some serious thought to how I could make use of that plugin.
John
can i disable the swipe function on mobile sites?
I didn’t see that option in the FooBox settings, so you should probably ask that question at FooBox Support.
Hey John,
Thanks for the recommendation of this plugin. It has saved me so much time, and I am now installing on my second website.
Thanks for all of your tips!
Suzanne
Hi Suzanne,
Glad you like it, and you’re welcome! I agree, FooBox is a solid, well-done plugin.
John