On this page...

DHTML Picture MagnifierSaturday, January 1, 2005

DHTML Picture Magnifier


Here's a DHTML component that allows you to squeeze both the big picture and the details of a picture into a single space in your web site.

So far I've only managed to make work on Internet Explorer. In Firefox and other browsers I've tried, the image is displayed correctly but the floating magnifier element remains invisible. And of course it can be a little tricky even in Internet Explorer. On this page I've found that there is a little bit of a race condition between initializing the magnifier for an image and getting the overall script initialized. If you're running IE and the example here doesn't seem to be working, try clicking the Magnifier tool link in the side bar (as opposed to the browser's "refresh" button) to reload this page. If you manage to make this work more reliably or on other browsers, please let me know!

I started with an implementation I found online (original author unknown), simplified a bit, fixed a few minor bugs, added more stylization, and the result is here in this sample.

How To Add The Magnifier To Your Page


To use this on your web page, just follow a few easy steps.
  1. Add the files included with the download to your web site:
    FilePurpose
    magnifier.jsthis is the javascript for the magnifier
    magnifier.cssthis contains the styles used by the magnifier dhtml objects
    shadow1.png,
    shadow2.png,
    shadow3.png    		these create the shadow effect under the magnification window

  2. Add references to magnifier.js and magnifier.css in the <head> section of your page so that the script can be found.
    <HEAD>
    ...
    <SCRIPT> type="text/javascript" src="magnifier.js"></SCRIPT>
    <LINK href="magnifier.css" type="text/css" rel="stylesheet">
    ...
    </HEAD>

  3. Wrap the image in a DIV as shown below:
    <DIV id="smallSample">
    <IMG src="MagnifierSample.jpg" width="300" onload= "loadMagnifier('smallSample');">
    </DIV>

    Note that the ID of the DIV is passed to the loadMagnifier function so that it can associate the magnifier with the DIV.

That covers the basics. More substantial documentation on customization and use is provided as part of the sample download.

Labels:

Bookmark
Posted by Steve at 1/01/2005 02:47:00 PM
permalink -  0 Comments  -  Links to this post  -