You Looked.

Alright, I’ll be honest. The only reason I came up with this post in the first place was because I myself had a hard time figuring out how to do it. As cool as the idea of having an image pop-up from your blog, graying out everything behind it seems, its easy to feel like you’re chasing a distant dream when there are multiple ways to do it wrong, and make it complicated.

Before you begin reading further, I must tell you that this technique will be relevant only to certain people. This post is primarily for those people hosting their wordpress blog themselves. If you have a wordpress.com blog, this post will not help you as it is not possible to edit theme files in your blog unless you use wordpress.org. Any other person using something else might also find this post useful in terms of weeding out the good options from the bad ones when you are trying to achieve what we’re trying to achieve here. Ok! Now that that is cleared up we can get into the real stuff!!!

When I googled for ways to get pop-up images working, the first solution I came across was Highslide JS. This is a very convenient tool to work with, and best of all, it allows you to customize the way you want your images to pop-up. If you’re looking for an easily customizable solution, this is where you want to tinker around. It even lets you open up multiple pop-ups at the same time. I did have some troubles with it, but this would definitely rate as my best fall-back option. The problem with Highslide is that it is difficult to integrate into wordpress. Some plugins don’t work at all (dismal installation guides), and the ones that do are buggy. I tried my way around the plugin, manually integrating the highslide code into wordpress but where I fell short was getting pop-ups to work in urls specific to posts. The pop-ups worked beautifully on the blog’s homepage, but when I would click on the post, and go to it’s specific url, the code would fail. Within a few days, I decided to switch.

The second solution I came across was Lightbox 2. This is not customizable at all. All it is, is a fixed piece of code that you download and use. If you are intent on customizing, go ahead and tinker with the CSS; but unless you’re planning to write a lot of code, this doesn’t even come close to the customization that Highslide offers. The good thing however, is that its wordpress plugin has seamless integration. I got started with the required pop-ups in no time. But within two minutes I stumbled onto this software’s Achilles’ heel. Though my thumbnail was very small, the actual image it linked to was huge (wider than 1280 px). And Lightbox 2’s popup didn’t resize it for me. I had this huge pop-up, almost twice the width my poor laptop could handle right in the middle of my screen! I thought of playing around with the CSS and fixing it, but then soon enough thought of taking another path. Lightbox 2 just didn’t look super impressive to me. And the plugin that I was using had been last updated 3 years back. Using it, to me, seemed more like dragging the past along.

Third time lucky. While rummaging through some forum, I found someone talking about pop-up videos. And I thought to myself, why not go for a takes-care-of-it-all solution? And thus I started looking for a software solution that could pop-up and play videos. Within two minutes I ran into Thickbox 3.1. I tried searching for a wordpress plugin for this, but even before I could find one, I read elsewhere that wordpress itself used thickbox! After this, getting things to work was a walk in the park.

Here’s what you do!

You enter your theme directory, and start editing the file header.php (winSCP has a built-in editor, and you can use an external editor to edit files in fileZilla). In this file, right before < ? php wp_head(); ? >, go ahead and add the following three lines of code.

<? php wp_enqueue_style('thickbox'); ?> <!-- line 1: includes Thickbox's CSS   -->
<? php wp_enqueue_script('jquery'); ?> <!--  line 2: includes jquery. -->
<? php wp_enqueue_script('thickbox'); ?> <!-- line 3: includes Thickbox's js -->

<? php wp_head(); ?>  <!-- This line would already be present in your file-->

Save the file, and you’re all set with integrating thickbox in your posts!

Next time whenever you want to get a pop-up going, you do the following. You add class=”thickbox” in the “a href” tag, so that you’ve got your code looking like this.

<a href="actual-image.jpg" class="thickbox"  title="Demo">
<img src="thumb.jpg"/>
</a>

As you can see above, it’s perfectly OK to use titles too. These titles appear below the pop-up images.

If you have a bunch of pictures, then you can also group them together so that you see links to “prev” and “next” in the pop-up window. For that you need to add rel=”type-in-anything-you-want” in the same href tag. Thus your code will look like –

<!-- first image -->
<a href="actual-image1.jpg" class="thickbox" rel="mobiles">  <!-- you can replace "mobiles" with any text -->
<img src="thumb1.jpg"/>
</a>

<!-- second image -->
<a href="actual-image2.jpg" class="thickbox" rel="mobiles">  <!-- you can replace "mobiles" with any text. Make sure it's the same as it is for the one above -->
<img src="thumb2.jpg"/>
</a>

That is pretty much it to get the core functionality of the pop-ups working. There’s one tiny thing though. You’ll notice that when you’re on post specific-URLs, the close button doesn’t appear and the link to that image is broken. To fix this, navigate to /wp-includes/js/thickbox/ in your online web directory and open the file thickbox.js for editing. Now, look for the following lines in that file.

if ( typeof tb_pathToImage != 'string' ) {
	var tb_pathToImage = "../wp-includes/js/thickbox/loadingAnimation.gif";
}
if ( typeof tb_closeImage != 'string' ) {
	var tb_closeImage = "../wp-includes/js/thickbox/tb-close.png";
}

All you need to do is replace the relative URLs to loadingAnimation.gif and tb-close.png, with the absolute URLs for these images. And that will be it!

Hopefully, you’ll get things right and working. Good luck! :)

If you’re not using wordpress, just make sure you download the Thickbox code (it’s a folder) and upload it in your web directory. Once done, link your webpages to the files from that folder. And then, you can tag your images in the same way above.