Auto Thickbox Plugin For WordPress

Click to Enlarge

Sopwith Pup

The Auto Thickbox plugin for WordPress automatically enables thickbox on thumbnail images (i.e. opens the images in a fancy pop-up), through the use of WordPress' built-in thickbox library.  Click the image to the right to see this behaviour.

Benefit: as a website publisher you want your pages to load as quickly as possible.  That means that image files in particular should be as small as possible, the best option being thumbnail size, rather than having the user wait for large image files to download before they can see the whole page.

Thickbox effectively transfers the decision to view or not to view a large image to the user.  If the fast loading thumbnail image catches their attention sufficiently that they want to see it in larger detail then the user takes the decision to wait for the download of the larger image file.

ThickBox will also resize images that are bigger than the browser window and will remain centered in the window even when the user scrolls the page or changes the size of the browser window. Clicking an image, the overlay, or close link will remove ThickBox.

For maximum effectiveness, ensure that the dimensions of your thumbnail size are specified.  Similarly, although Thickbox will resize a very large image to fit within the available browser window this takes resources and time.  Therefore, it is more effective to resize an image before uploading to be the maximum size to fit within a browser window without further resizing.

Method: Insert the full size image into your post.  Select the size as Thumbnail.  Link to the image URL by clicking the File URL button.  If your users are not familiar with the facility it may be wise to edit the Title to 'Click to Enlarge' as it will show when the cursor is hovered over the image.

Adding an image

Adding an image

In the event you'd like to override Thickbox for an individual image, you can disable the behavior by adding 'nothickbox' to the CSS Class in Advanced Link Settings.

Thickbox Galleries

<Previous - Next>

By default, the auto thickbox plugin will bind all images within a post into a single thickbox gallery. That is, thickbox will add next image and previous image links so you can navigate from one image to the next.

Click on this second image to see that all images are linked as Next and Previous.  The behavior is particularly interesting when you create galleries using WordPress' image uploader.

On occasion, you'll want to split a subset of images into a separate gallery. Auto Thickbox lets you do this as well: add an identical Link Rel attribute to each image you'd like to group in the same gallery and you're done.

To set the rel attribute using WordPress' image uploader, start by inserting the image into your post. Then, edit that image, browse to Advanced Link Settings and set Link Rel.  Any group of characters will suffice as a Link Rel.

Note that Thickbox works across a complete page.   Therefore, a number of posts on the front page of your site will have all the images galleried together.  This is one occasion when the ability to split them into separate galleries may be useful if you wish to keep images associated only with a single post.  To illustrate, the last three images on this page have been split into a separate gallery by using the Link Rel of 'xyz'.

Boeing B-17 Bit o'Lace

Boeing B-17 Bit o'Lace

Bristol Bulldog

Bristol Bulldog

A number of other fields also open in the Advanced Settings.  These can safely be ignored by non-coders.

Thickbox Anything

Note that thickbox works on any link, not merely image links. To enable thickbox on an arbitrary link, set that link's class to thickbox.

Download

Bleeding Edge Zip

Frequently Asked Questions

HELP ME!!!

The Semiologic forum is the best place to report issues. Please note, however, that while community members and I do our best to answer all queries, we're assisting you on a voluntary basis.

If you require more dedicated assistance, consider using Semiologic Pro.

Change Log

Version 3.0

  • Added new keyboard support: Left arrow, right arrow, home, end
  • Next and Prev don't always advance correctly with Thickbox.js 3.1. Plugin now has own custom thickbox.js.
  • WP 3.9 eliminated some of the default thickbox styling. Plugin now has own custom thickbox styling
  • Changed ordering of Prev, Next and Image of
  • Photo title is now centered.
  • Now support .bmp image extensions
  • Custom thickbox.js uses a minified version for better performance.
  • WP 3.9 compat
  • Code refactoring

Version 2.4.1

  • WP 3.8 compat

Version 2.4

  • Further updates to the link attribute parsing code
  • Fixed bug where img was not processed if it was preceded by an empty text anchor link.

Version 2.3

  • WP 3.7 compat
  • New link attribute parsing code to handle various image link configurations.

Version 2.2

  • WP 3.6 compat
  • PHP 5.4 compat
  • Fixed issue with parsing of links with non-standard (class, href, rel, target) attributes included in the tag. This caused Twitter Widgets to break.
  • Fixed issue with images containing onLoad (or other javascript event) attributes with embedded javascript code possibly corrupting js code

Version 2.1.1

  • Removed Auto Thickbox Plus fixes applied in previous version. Seemed to cause issue on some site upgrades

Version 2.1

  • WP 3.5 compat
  • Backport bug fixes from Auto Thickbox Plus

Version 2.0.3

  • Fix conflict with wp cron.
  • Use esc_url() / Require WP 2.8.

Version 2.0.2

  • Actually load the text domain for i18n support...

Version 2.0.1

  • Restore the nothickbox functionality
  • German and Brazilian Translation (requires WP 2.9 for the js part)
  • Force a higher pcre.backtrack_limit and pcre.recursion_limit to avoid blank screens on large posts

Version 2.0

  • Full iFrame support
  • Code enhancements and optimizations
  • Localization support