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.
The example I will be showing utilizes a thumbnail sized image which comes to life at the hover of a mouse...
Step 1Download the necessary files listed below:
Step 2Start of simple by creating a standard ASP.NET Web Application
Step 3Add 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: