Zip*Zoom - Web Page Image Magnifier

The images laid out on the page below are normal images. The first two will remain normal, but the remaining three have special properties. Click one of those three images to turn them into magnifiable images. The converted images will include a smaller window that can be dragged around on the image to show a magnification of the underlying area.

• Give users with small screen images the ability to see detail in your photos.
• Magnification code replaces the existing image and doesn't affect page layout.
• You select which images to magnify.
• One page script can be used for all selected images.
• Images can be any size or shape.
• Some Copy Protection: right-click is disabled in the magnifier.

Adding the Magnifier to your Page

To use the Magnifier in your own auctions, copy the code from the window below and paste it into your auction template. If you allow users to activate the magnifier by clicking on the images, then place the code near the top of your template. If you plan to use the automatic activator script, you may place the magnifier code near the top or bottom of your template.

Each of your images will need to be wrapped in this linking code in order to use the script.

    <a href="javascript:initMagnifier()">
    <img src="http://www.myhost.com/image.jpg"
     width="400" height="300" border="0"></a>

The final step is to decide how to activate the magnifier. The above code will activate the magnifier as soon as the user clicks one of the images, and presumably the images will have loaded by that time. If you would like to automatically activate the magnifier (and thus automatically apply the copy protection), add this activation script at the very bottom below the magnifier code and below all of the images. This is in addition to adding the above codes to each image.

     <script language="javascript" defer>initMagnifier()</script>

When using automatic activation, your image tags MUST include both height and width photo dimensions, otherwise, the magnifier will not be able to adjust to fit the image.

Once activated, magnification remains active while the page is open. Mousing in and out of a photo will cause the magnifier to appear or disappear.

Other Options

The link code need only be applied to one photo for manual activation. It might be on the very last image if the purpose is to allow time for the images to load. If you feel more explicit directions are required for your user, activation could be applied to a button instead. Button code would look like this:

    <input type="button" onclick="initMagnifier()" value="Use Magnifier">

Another coding option allows alternate image wrappers that only need to carry this class-designator in the wrapper tag. Any other content between the wrappers, aside from the image code, will be wiped out. This type of code is used with automatic activation, or could be applied to the other non-clickable images when you want the magnifier to be started from a specific image in your group.

    <span class="magnify_this">
    <img src="http://www.myhost.com/image.jpg"
     width="400" height="300"></span>

Problems?

Avoid wrapping or nesting your magnified images in the P-tag. That is not an Internet Explorer compatible wrapper for the magnifier DIV-tag. Don't use TurboLister or eBay's Listing Editor to reposition your images on the page, as they can add/replace code (specifically the P-wrapper) that is not compatible with the image Magnifier code. The most effective positioning is with table codes (which is also a handy way to add captions).