(3) comments
Add Your Reply
Menu
It doesn’t matter if you are an online retailer, an affiliate marketer or just an avid blogger sharing photo’s of your hobbies, the ability to zoom into an image is a cool feature that will capture the interest of your audience and keep them on page longer. And a longer visit duration is better, right?
I am sure your imagination can take the lead here, but I thought a quick sample would serve to really highlight my point. Here is a small image of my granddaughter Raven. If you hover your mouse over her photo, a larger *zoomed* image should appear so you can really see some of the detail.
Now, try to imagine something like an image of a motorcycle you are selling or a photo of a laptop with extra and lots of little pieces. A book image or a Halloween costume. I think you get the idea.
There are several tools that will add this function to your website or blog. The one I chose is MagicZoom, which is a commercial grade tool but comes with lots of features and options. I examined others (mostly free) which I listed below. One of them should suit your needs, no matter how complicated you want to get.
The one I am using is Magic Zoom, a commercial JavaScript zoom tool with its price starting at $25 for a single license. Available in several different versions, it works by hovering your mouse over the image to see a magnified version of it. Magic Zoom loads the high-resolution image in the background thus allowing your page to load faster. It offers several customization options like skinning, size and supports multiple image zooms. Check out their demo page to see all the options available. (I didn’t see any reason to reinvent the wheel here)
MojoZoom is a free JavaScript Image Zoom script that works by moving your mouse over an image to see an zoomed version of it. It places a square to the right of the image with the magnified portion of the image. In addition to adding the zoom effect to your image, it will also automatically link it to its high resolution version. The developers also released a slightly modified version of the script called MojoMagnified. Both of these are independent scripts and do not require external JS libraries to work. (A personal note: I tried to get this one to work here but couldn’t. I am sure I am doing something wrong, but the doco didn’t point me in the right direction. If you are the author of the tool and would like to help me resolve that issue, please use the contact me link)
TJPzoom is more or less similar to other image zoom solutions but it offers a few different options. For example when hovering over an image, you can drag up and down to increase or decrease the zoom ratio. Similarly dragging left or right will increase or decrease the zoom window size. If you specify a high resolution image, TJPZoom will use it when someone zooms on your image showing the little details of your image. The script is compatible with all major browsers including Internet Explorer 6, and setting it up takes roughly less than a 5 minutes. I personally didn’t care for the default settings which required a larger image on page and would embed the magnification within it. Just not my cup of tea, but might be exactly what you are looking for.
JQZoom is a JavaScript image magnifier built at the top of the popular jQuery JavaScript framework. jQzoom is a great and a really easy to use script to magnify what you want. It supports different type of zooming like standard, reverse and zoom without lens. If you’re familiar with jQuery, you can add several effects to your zoomed images like fade in or fade out. This was the first one I installed and bouyed my spirits since it was so easy to implement. I uploaded the files, added a little one liner in my post and viola! Done. My only downside was it wouldn’t wrap text around the small image — it left this huge empty space… a real no-no on web pages…
Based on the Mooltools JS framework, Mootools Image Zoom attempts to mimic zoom effect we see in Flash applications. It works by assigning a thumbnail of your image to its corresponding high resolution version that should be in proportional size. The zoomed area can be updated by either moving the zooming region on the thumbnail or by dragging the zoomed image. Styles are set up into stylesheet so that no modifications need to be made from JavaScript.
