Quick and Easy Image Zoom Using JQuery
|October 24, 2010||Posted by Stephen Coursen under Programming, Web|
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.
Here is the code I used to accomplish this task.
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:
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.