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:jquery-1.5.1.min.js
jquery.scrollTo-1.4.2.js"
jquery.my_validation.js
jquery.form.js
jquery.jqbox.js
jqbox.css
jquery.jqzoom.css
jquery.jqzoom-core-pack.js
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:
thanks that is quite interesting :P
ReplyDeleteThis looks cool. Will try it out
ReplyDeleteNice blog!
ReplyDeleteWill try this out.
this thing really works thanks man
ReplyDelete