JS-Zoom Lens®

The Ultimate Javascript Product Zoom!
v.0.89

Home

Examples

Download

Contact

INTEGRATION OF JAVASCRIPT ZOOM LENS

The integration of Javascript Zoom Lens is pretty simple. Please find all the information that you need below.

1.) Load Javascript and CSS
The first step in getting the javascript zoom lens to run on your page is to load the external javascript and css files. Therefore please copy the lines below into the "head" of your page. Please copy jszoom.js into the /js folder and the jszoom.css into the css folder. You might have to create these directories.

2.) Copy HTML into your page
After you have linked in the external files please copy the following html into the body and appropirate location of your page.

<div id="magnifier_space" style="margin-left: 64px; height: 480px">
  <img id="standard_image" src="images/clear.gif" />
  <div id="magnifying">
    <img id="magnification_image" src="images/clear.gif" />
    <div id="loading_anim"><img src="images/loading_zoom.gif" id="loading_anim_img" /> Loading...</div>
  </div>
  <img id="magnify_overlay" src="images/clear.gif" />
  <img id="transparent" src="images/clear.gif" onMouseOver="jszoomlens.init(event, this);" />
  <div id="dot1" class="hotspots" style="	left: 200px; top: 185px;" onClick="alert('You have clicked on a Hot Spot!!! \n This could trigger a layer to show or a function be be called.\n\n © 2009 by Flori Seeger.');"><img src="images/clear.gif" width="15" height="15" /></div>
  <div id="dot1" class="hotspots" style="	left: 700px; top: 400px;" onClick="alert('You have clicked on a Hot Spot!!! \n This could trigger a layer to show or a function be be called.\n\n © 2009 by Flori Seeger.');"><img src="images/clear.gif" width="15" height="15" /></div>
  <div id="optionsmenu" onMouseOut="this.style.display = 'none';" onMouseOver="this.style.display = 'block';">
    <b>Lens Options</b><br />
    Size: 
    <a id="size1" href="javascript:;" onClick="jszoomlens.lenssize(150); sizeswitch(event, this.id)" style="color: #000">S</a> / 
    <a id="size2" href="javascript:;" onClick="jszoomlens.lenssize(200); sizeswitch(event, this.id)">M</a> / 
    <a id="size3" href="javascript:;" onClick="jszoomlens.lenssize(250); sizeswitch(event, this.id)">L</a> / 
    <a id="size4" href="javascript:;" onClick="jszoomlens.lenssize(300); sizeswitch(event, this.id)">XL</a>
    <br /><br />
    Zoom Level: 
    <a id="level1" href="javascript:;" onClick="load_zoom_img('zoom_0.jpg', event); levelswitch(event, this.id)" style="color: #000">I</a> / 
    <a id="level2" href="javascript:;" onClick="load_zoom_img('zoom_1.jpg', event); levelswitch(event, this.id)">II</a> / 
    <a id="level3" href="javascript:;" onClick="load_zoom_img('zoom_2.jpg', event); levelswitch(event, this.id)">III</a> / 
    <a id="level4" href="javascript:;" onClick="load_zoom_img('zoom_3.jpg', event); levelswitch(event, this.id)">VI</a>
    <br /><br />
    <a id="advance_settings_link" href="javascript:;" onClick="toggle_advanced_settings()">Advanced Settings</a>
    <br /><br />
    <div id="advanced_settings" style="display: none">
      <input type="checkbox" id="ydisable" value="false" onClick="vertical_horizontal_zoom(event, this.checked, this.id);" />Horizontal Zoom
      <br />
      <input type="checkbox" id="xdisable" value="false" onClick="vertical_horizontal_zoom(event, this.checked, this.id);" />Vertical Zoom
      <br />
      <input type="checkbox" id="overlay" onClick="toggleoverlay(event, this.checked);" />Lens Effect
    </div>
    <br />
    <span style="font-size: 8px; color: #666">JS Zoom by Flori G. Seeger</span>
  </div>
</div>
<script language="javascript" type="text/javascript">
// self invoking function to init image load check
(function (){
	name_prefix = 'vmax_';
	image_path = 'images/';
	init_loading_sequence('regular.jpg','zoom_0.jpg');
})();
</script>

3.) Image Generation / Naming Conventions
Now that you have all the code implemented into you page let's have a closer look at images and how to name them.

Javascript Zoom Lens requires at least 2 different image sizes to work, a reguar image and a zoom image. The code example used on this page is using "vmax_regular.jpg" and "vmax_zoom_0.jpg". You will have to sequence your zoom images to support different levels of magnification. For example: "vmax_zoom_0.jpg", "vmax_zoom_1.jpg", "vmax_zoom_2.jpg", etc.

In your HTML you will find the following piece of code. This code is initializing the javascript zoom lens and also determines the naming convention of your images and their location.

The variable "name_prefix" defines the prefix of your images. So for example your image is named: vmax_regular.jpg, you would set this variable to "vmax_".

The variable "image_path" simply sets the path to your images. If your document is located in the root directory and your images are located in a directory called "images", you would set this variable to "images/".

4.) Lens Adjustments / CSS
Javascript Zoom Lens is fully customizebale and the few styles below show you how easy it is.

Here real quick a few words to the individual styles:

#magnifier_space = defines the location of your standard_image, can be set to relative or absolute.
#magnifying = defines the look and feel of the magnifying lens, width and height define the size of the zoom lens.
#optionsmenu = defines the look and feel of the options popup menu.

If you have any other questions or you need help, please contact me.