Quick and Easy Image Zoom Using JQuery

I maintain/manage some Websites that are developed by outsiders. Some of them are stuck (for one reason or another) using older tools and software packages … namely Microsoft FrontPage. In one of the websites, in particular, the previous method of showing a larger/zoomed-in version of an image was to open a new tab or browser window using the image’s URL.

After some discussions with the site’s creator and it’s owner, we decided to bring the design up to current practices, and use a modal dialog to display the images. So, I turned to the handy-dandy search engines and, after some searching, settled on ThickBox as the JQuery plugin to use.

One of the annoyances of front page is how tedious certain tasks are — chief among them is changing the “properties” of something like the <a> tag to add a class attribute to them. Since Thickbox (as most JQuery-type implementations) requires a class name or id to be used on a HTML element, I quickly realized that the amount of tedium involved in making this change would be large.

So, instead a opted to use another Javascript function to add the appropriate class name (in this case, “thickbox”) to the <a> elements that need to show the enlarged images. And, of course, as with most JQuery solutions, it degrades nicely in the presence of non-Javascript aware browers — returning to the original behaviour of spawning a new tab or window to show the enlarged image.

Here is the code I used to accomplish this task.

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
google.load("jqueryui", "1.7.1" );
</script>
<script type="text/javascript">
$(document).ready( function() {
    $('a[href^=images]').addClass("thickbox");
    $('a[href^=images]').html('');
  });
</script>

<script type="text/javascript" src="/thickbox.js"></script>

As you can see, most of the block is the boilerplate for using ThickBox. For this to work, you will need to download thickbox.js or thickbox-compressed.js, ThickBox.css, and the loading graphic (loadingAnimation.gif) to your server.

The interesting bit that makes it all work is the following:

<script type="text/javascript">
$(document).ready( function() {
    $('a[href^=images]').parent().addClass("thickbox");
  });
</script>

This loops through all the <a> tags with an href attribute starting with images, which just happens to be the path to the non-thumbnail version of the images we want to show. You will, of course, need to change the ‘a[href^=images]’ to fit your URL structure. While looping through these elements, we add the “thickbox” class to the <a> tag, thus allowing for the rest of the ThickBox to render and behave properly.

All in all, it took about 2 hours to get everything working correctly (there was an incident involved a naiive regex that made all the links on the page behave as ThickBoxen). That’s not too shabby considering that I’ve only been using JQuery for about a week and a half at this point.