Thursday, December 13, 2012

Zoom Zoom...

Here is an awesome little JQuery hack if you ever come across the problem of displaying multiple images on a single page without having to make them all thumbnail sized and ruining the entire visual experience of the page.

Introducing JQZoom

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.

The example I will be showing utilizes a thumbnail sized image which comes to life at the hover of a mouse...

Step 1

Download the necessary files listed below:


Step 2

Start of simple by creating a standard ASP.NET Web Application

Step 3

Add your script and style references to the Default.aspx page

Next add the script tags and the following script...

Finally add your div tags with the image references

As you can see there are two images referenced on the page the first is the reference to the higher quality image and the second to the thumbnail sized image... You can use one image as well and then just set up your image width and height but this however messes around with the zoom when your scaling is too far out.

Real world applications includes Social Networking Sites and On-line Shops but as far as the simplicity of this little package is concerned applications could be endless and just as a bonus it looks spectacular.
For more information and demos please visit the inspiration site for this blog: