Follow us

Thursday, March 17, 2011

Image Magnifier


Introduction

This Image Magnifier / Zoomer allows you to add photorealistic loupes (magnifier) to images on your webpages. It uses unobtrusive javascript to keep your code clean.

How can we implement Image Magnifier?

Add a Javascript

Include javascript file loupe.js into your webpages HEAD section.
<script src="Scripts/loupe.js" type="text/javascript"></script>

Set the event onload="loupe.add(this);" to an image (surrounded by div).

HTML formation will be as follows:
<div style="float: left; width: 500px; height: 375px; background: url(https://lh4.googleusercontent.com/_Ap6665TAgI8/TYHh_-YHL8I/AAAAAAAAAX8/aRvP5-Pdbw4/technoscatter%20-%20Indian%20Currency.jpg) no-repeat;
            margin-right: 1em; margin-bottom: 0.25em;">
            <img id="caribbean" onload="loupe.add(this,{visible:true,crosshair:true,xview:773,yview:364});"
                src="https://lh4.googleusercontent.com/_Ap6665TAgI8/TYHh_-YHL8I/AAAAAAAAAX8/aRvP5-Pdbw4/technoscatter%20-%20Indian%20Currency.jpg"
                style="cursor: wait;" width="500" height="375" alt="Technoscatter - Indian Currency"
                title="Technoscatter - Indian Currency" border="0" />
        </div>

Set path of images

There are three images whose path needs to be set in loupe.js file :
  1. loupe.png
  2. lense.png
  3. icon.js
By Default, the path of images is : images/loupe.png etc...

Demo

Demo
Technoscatter - Indian Currency

Download the sample code

Sr.No Download Size
1 Image Magnifier 82.61 KB

Digg Google Bookmarks reddit Mixx StumbleUpon Technorati Yahoo! Buzz DesignFloat Delicious BlinkList Furl

0 comments: on "Image Magnifier"

Post a Comment