Image Zoom In and Out - FREE JavaScript

About

This script allows you to zoom in/zoom out an image easily. While zooming an image in/out it does not move the contents around the image. It is similar to that of thumbnail picture script.

Features

a) This script allows you to zoom in/out an image conveniently .
b) Customizable, change the size, position, colors to suit your website.
c) Easy to add it to your website in minutes.
d) Just copy the code and use it into your page where you want these thumbnail pictures to appear.

Preview


©hscripts.com

Code

Javascript Code

<!-- Script by hscripts.com -->
<!-- Copyright of HIOXINDIA -->
<!-- More scripts @www.hscripts.com -->
<script type="text/javascript">
//set the time delay,imgsize,arrsize.
var delay=20;
var imgsize=5;
var arrsize=4;
var timeon;
var whoc = new Array(arrsize);
var wid;
var hei;
var i=0;
function zoom_out(p,q,which)
{  
   if(which.width <= p)
      which.width += imgsize;
   if(which.height <= q)
      which.height += imgsize;
   if(which.width <= p)
   {
      var tmp=which.id;
      timeon=eval("setTimeout('zoom_out("+p+","+q+","+tmp+")', delay)");
   }
   if(which.width > p)   
   {
      zoom_check(which.id);
      clearTimeout(timeon);
   }
}
function zoom_check(xx)
{
    for(var x=0; x<(whoc.length);x++)
    {
        if(whoc[x] != null && whoc[x] != xx)
        {
	    var ff = document.getElementById(whoc[x]);
            ff.width=wid;
	    ff.height=hei;
        }
    }
}
function zoom_in(r,s,asd)
{
  if(i<(whoc.length-1))
	i++;
  else
	i=0;
  whoc[i] = asd.id;
  if(asd.width >= r)
      asd.width -= imgsize;
  if(asd.height >= s)
      asd.height -= imgsize; 
  asd.width=r;
  asd.height=s;
  wid=asd.width;
  hei=asd.height;
}
function ctck()
{
var sds = document.getElementById("dum");
if(sds == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
var sdss = document.getElementById("dumdiv");
if(sdss == null){alert("You are using a free package.\n You are not allowed to remove the tag.\n");}
}
</script>
<!-- Script by hscripts.com    -->

HTML Code

<!-- Script by hscripts.com -->
<table align=center cellspacing=2 cellpadding=2 height=100% width=100%><tr>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture1" src="hzoom-images/book.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture2" src="hzoom-images/globe.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture3" src="hzoom-images/email.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
<td width=10></td>
<td align=center width=120 height=125 style='cursor:pointer;'>
<img id="myPicture4" src="hzoom-images/clock.gif" width="40" height="48" onMouseover="zoom_out(55,65,this)" onMouseout="zoom_in(40,48,this)"></td>
</tr>
<tr><td colspan=7>
<div align=center style="font-size: 10px;color: #dadada;" id="dumdiv">
<a href="http://www.hscripts.com" id="dum" style="text-decoration:none;color: #dadada;">© hscripts.com</a>
</div>
<script language="javascript">document.onload = ctck();</script>
</td></tr>
</table>
<!-- Script by hscripts.com -->

Downloads Version 1.0 - zooming-images.zip

Release Date - 27-08-2008
Get free version without ©copyright link for just 5

For customization of this script or any script development, contact us at support@hscripts.com

Usage

a) This script is useful for zoom in/out of an thumbnail image.
b) Unzip the zooming-images.zip, where you can get the html file to execute.
c) Set the time delay as ur wish. i.e,var delay=10;
d) Set the imgsize as ur wish. i.e, var imgsize=5;
e) Right click and save the images.
f) You can add any number of images and set the array size.
For Example
If you add 4 images means set the array size as 4.
g) Set the unique id for each image and change the height and width of an image in the zoom_out() and zoom_in() function.
Example,
<img src="images/child.gif" width="48" height="48" id="myPicture1" onmouseover="zoom_out(55,65,this)" onmouseout="zoom_in(40,48,this)">

License

- The javascript (misspelled as java script) is given under GPL License
- i.e. Free use for those who use the codes as it is.
- Free, if your modification does not remove our copyright information and links.
- Click Here for detailed license information.
- You can purchase the script if your requirements does not meet our GPL License terms.

Image Zoom In and Out Script