The thumbnails above are floatboxed links in WordPress, one for an image and the other for a video. (Click ‘em, try ‘em.)
There are two plugins I am aware of that provide install and configuration wrappers for Floatbox in WordPress: Simple View and Floatbox-Plus. Of the two, I think Simple View is the better plugin as it gives access to many more of Floatbox’s options and settings than does Floatbox-Plus.
However, I am very much of the opinion that you are better off avoiding both of the plugins and instead just installing and using Floatbox directly. This plugin-less approach requires that you be willing to edit the html code of your pages directly, but doing so is only slightly more difficult than using the plugin screens.
The advantages of the direct html approach are many. The plugins provide no access to many Floatbox capabilities such as cycling image sets, enhanced tooltips, popup thumbnails and API calls. Using the direct approach means you can use the documentation that comes with Floatbox to assist in getting things the way you want. And, importantly, I can provide support for Floatbox when it is installed and used in the standard fashion of html editing, but can offer no support for the plugins. (Floatbox-plus has a support forum at http://board.splash.de/forumdisplay.php?f=103, but I can’t find any support channel for Simple View.)
Are you ready to use Floatbox with the standard and supported direct html approach? Good. What follows is a description of how to get started.
WordPress is a template driven system, and the way to put floatbox into any templated system is to find where the document <head> sections are defined and insert the floatbox include lines into that head section. If you’re using the default template, the path to your file that defines the head section is probably wordpress/wp-content/themes/default/header.php. If you’re using a different template, it should be easy to locate the corresponding header.php file.
Install floatbox (copy it, ftp it) to where you want it to live on your site – maybe to a “floatbox” folder at the root of your site. Put the standard floatbox include lines into the <head> section of header.php. I put those two lines between the existing “pingback” link and the following <style> block. It ends up looking, in part, like this (your paths may vary):
... <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <link rel="stylesheet" type="text/css" href="/floatbox/floatbox.css" /> <script type="text/javascript" src="/floatbox/floatbox.js"></script> <style type="text/css" media="screen"> ...
Once that simple task of pasting those two lines into your template file is done (and possibly changing the paths to match your site), you’re all set to put Floatbox markup on your anchors in WordPress pages and posts the same way you would mark up anchors on “normal” pages, as described in the floatbox instructions, by using the HTML tab of the WordPress post editor.
See the Floatbox instructions for details about how you can set site-wide options preferences in Floatbox’s options.js file or set page and item-specific preferences. On this sample post, the image link is using the Floatbox defaults so there’s no need to modify any settings. All that is needed is to add or edit a link to give it a class name of “floatbox”. For the video link, we’ve added the option that auto-inserts the video thumbnail onto the page.
<a href="/images/demo/phang_nga_bay.jpg" class="floatbox"> <img src="/images/demo/phang_nga_bay_thm.jpg" alt="" /> </a> <a href="//vimeo.com/15795860" rev="addVideoThumb:small"></a>
Be sure to have a read of at least the first section of the instructions. Between that and the WordPress-specific pointers given here, you should be up and running with this plugin-less and supported approach after just a short time investment.
By the way, if you’re using floatbox in Joomla or some other CMS that uses the tinyMCE editor, turn off tinyMCE’s ‘verify HTML’ setting or else it will strip out any data-fb-options attributes placed on the floatbox content links. Alternatively, use rev attributes instead of data-fb-options attributes for the options – Floatbox will accept either attribute.
Have fun!!!