It’s been more than a week since my last post. Last March 17 was my birthday, I received some presents so I want to give you a present now, a new WordPress plugin. You can use this plugin to beautify your post by creating thumbnails using the jQuery.Thumbs plugin and adding Thickbox.
You can see this plugin in action in my portfolio section and in several images throughout the site. Here’s another example:
This image has full ILC Thickbox applied. Notice that I’m using the Art-Direction plugin to override in this particular case the float:left that the outer image wrapper has since I need that property for the rest of my site (I’ve commented that property in the file you will be downloading and added a comment in case you want to enable it back).
This one doesn’t have a thumbnail but if you click it, the original sized image will launch.
The last one doesn’t have a thumbnail and it won’t launch a larger view.
- Upload `ilc-thickbox` to the `/wp-content/plugins/` directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- You can access the options page via the Admin navigation menu or the plugins list, using the Settings link.
- Edit a post/page, upload an image in the usual way with the Add Image button and insert a thumbnail or a medium size. A full size also works but it wouldn’t make sense to use Thickbox.
- There’s a new button on the TinyMCE editor, select the inserted image and click it. Now that image will be managed by ILC Thickbox. Click it again to disable ILC Thickbox on the image. There’s also a shortcut added for your convenience, Alt+Ctrl+X.
The magnifier glass that is overlayed on top of my portfolio and other images thumbnails, is created using only CSS so you can edit it in the plugin options page and replace the background image. I’ve included two images, mg.png, which is the default, a gray picture, and mgBlue.png, with a light blue background.
Finally, this plugin will also create groups of images based on post ID. For instance, if you open the first image you can move to the next one without leaving the Thickbox. This is the Image Gallery behaviour of Thickbox.