PDA

View Full Version : Magic Zoom

Magic Toolbox
05-26-2008, 07:01 PM
Here is a JavaScript tool that reveals a much larger image when you hover over a small image. You can see it working here:

Magic Zoom examples (http://www.magictoolbox.com/magiczoom_examples/)

It's free for non-commercial use (http://www.magictoolbox.com/license#free), there is a small fee for commercial websites. I hope it's OK to post it here?

One of the nice things about the script is that the HTML code is very clean. The HTML below is all you need.

You reference the JS file and CSS file in the <head> like this:


<link rel="stylesheet" href="MagicZoom.css" type="text/css" media="screen" />
<script src="mz-packed.js" type="text/javascript"></script>

You reference the small and large image in the <body> like this:

<a href="big_image.jpg" class="MagicZoom"><img src="small_image.jpg" alt=""/></a>

There are a number of customisations (http://www.magictoolbox.com/magiczoom_integration#customisation) that can be made like size, colours, multiple images.
Minkey
05-26-2008, 07:23 PM
Really cool! I think I'll be using this one :)
fside
06-07-2008, 03:18 AM
Here is a JavaScript tool that reveals a much larger image when you hover over a small image.

There are some commercial products that I suppose I could post. But wouldn't it be better to show the source code, here, or else advertise in a different forum? I'm just asking. But you can see for at least what I've posted that there is the full code, lots of comments, and explanation of what is happening. You haven't posted the commented code of how you 'magnify' sections of images.
WA
06-07-2008, 08:05 AM
Please read the rules (http://www.codingforums.com/showthread.php?t=1510) on what should and shouldn't be posted in the Post a JavaScript category. It's only for putting up 100%, completely open source snippets of codes, not commercial (even if it's free for non commercial use). That's what advertising is for.

Due to this, this thread will be deleted shortly. Closing thread.