Expanding Image Animator

• Download coolcode_src.zip - 43.2 KB

Introduction

The Article is just a javascript, that will help you to animate your image or any display article, like a div from some specified size to another size. Thus enable you to make a dynamic web page were the pictures glows from thumbnail view to a full image. Just check out my code.

Background

You need to have the basic windows knowledge of how to run an application, you need IE and nothing else. To modify the code, you need to have strong idea about DOM and javascript.

Using the code

Well, using this code just you can use to show image in your web page with animation within it. Just check this. When using this code, two things you need to remember, for each image you need two img tags, one to show the expanded image called (screen + value) another for reduced image called (thumb + value). Passing value to the expand image will concat it to screen to display the enlarged image to screen+val. So you need to use expand image on an event of thumb + val. and reverse to the screen + val where you need to use reduce image.

Just make your code in such a way that the <img > tag to show the thumbnail and the screen have same value. Here in the example html file I have used 142 as both screen and thumb, so that the same image gets displayed.

Download the source code from here... .Download coolcode_src.zip - 43.2 KB

Blocks of code should be set as style "Formatted" like this:

// Thumbnail expansion and reduction animation
//use expandthumb(142, 500, 449) to increase and 
//reducethumb(142) to decrease the thumbnail
//142 represents the name of the thumbimage.. it should be like thumb142
// for reduceimage 
// and the expanded image id will be screen142 for the value 142 in 
//expandimage 
//500 and 449 are the enlarges size of the image

exid = 0;
exstep = 0;
exwdth = 0;
exht = 0;
extp = 0;
exlft = 0;
extot = 0;
extotst = 15;

function expandthumb(thumbid, fullwidth, fullheight) {
  if (extot != 0) {
    clearTimeout(extot);
  }
  if (exid > 0 && exid != thumbid) {
    restorethumb();
  }
  if (exid != thumbid) {
    img = document.getElementById("screen" + thumbid);
    img.style.display = 'block';
    exid = thumbid;
    exstep = 1;
    exwdth = fullwidth;
    exht = fullheight;
    extp = img.offsetTop;
    exlft = img.offsetLeft;
  } else if (exstep < 1) {
    exstep = 1;
  }
  expandstep();
}

function doexpand() {
  img = document.getElementById("screen" + exid);
  thumb = document.getElementById("thumb" + exid);
  myscroll = getScroll();
  if (extp + thumb.height > myscroll.top + myscroll.height) {
    finaltop = myscroll.top + myscroll.height - exht;
  } else {
    finaltop = extp + thumb.height - exht;
  }
  if (finaltop < myscroll.top) { finaltop = myscroll.top; }
  img.style.top = finaltop + ((extp - finaltop) * (extotst - exstep) / extotst) + 'px';

  if (exlft + thumb.width > myscroll.left + myscroll.width) {
    finalleft = myscroll.left + myscroll.width - exwdth;
  } else {
    finalleft = exlft + thumb.width - exwdth;
  }
  if (finalleft < myscroll.left) { finalleft = myscroll.left; }
  img.style.left = finalleft + ((exlft - finalleft) * (extotst - exstep) / extotst) + 'px';

  img.width = thumb.width + ((exwdth - thumb.width) * exstep / extotst);
  img.height = thumb.height + ((exht - thumb.height) * exstep / extotst);
}

function restorethumb() {
  img = document.getElementById("screen" + exid);
  img.style.top = '';
  img.style.left = '';
  img.style.display = 'none';
  exid = 0;
}

function expandstep() {
  extot = 0;
  doexpand();
  if (exstep < extotst) {
    exstep++;
    extot = setTimeout("expandstep()", 20);
  }
}

function reducestep() {
  extot = 0;
  doexpand();
  if (exstep > 0) {
    exstep--;
    extot = setTimeout("reducestep()", 20);
  } else {
    restorethumb();
  }
}

function reducethumb(thumbid) {
  if (extot != 0) {
    clearTimeout(extot);
  }
  if (exstep > 0) {
    reducestep();
  }
}

// returns the scroll position and size of the browser
function getScroll() {
  if (document.all && typeof document.body.scrollTop != "undefined") {  
    // IE model
    var ieBox = document.compatMode != "CSS1Compat";
    var cont = ieBox ? document.body : document.documentElement;
    return {
      left:   cont.scrollLeft,
      top:    cont.scrollTop,
      width:  cont.clientWidth,
      height: cont.clientHeight
    };
  } else {
    return {
      left:   window.pageXOffset,
      top:    window.pageYOffset,
      width:  window.innerWidth,
      height: window.innerHeight
    };
  }
}

Just check the html file also.

<html>
<head>
<script language="javascript" type="text/javascript" src="expandimg.js"></script>
</head>
<body>
<img src='mypic.jpg' width=400 height=400 alt='img' border=0 id='screen142' onmouseout='reducethumb(142); return false;' style='position: absolute; display: none;'>
<img src='mypic.jpg' width=100 height=100 alt='mis' border=0 id='thumb142' onmouseover='expandthumb(142, 500, 449);'></a>
</body>
</html>

Here I have used the mouseover to expand image from thumb142 where 142 will be the argument, and same to onmouseout in screen142.

Check out the snapshots to the application:

This is the first snapshot, which will be seen when the html loads for the first time. If I move the mouse over this , it will show

thus the 2nd image will be seen when mouse is turned over the image.

EXAMPLE:

You can download another sample page, that will enable to see more than one image. Just download this example

Download cool_src_demo.zip - 1,068.5 KB

The Snap Shot of this download is :

This Version can be seen online too .. Just click here

Points of Interest

You can use any number of images in your webpage, only you need to do, is to make two image for each image to be shown, and then give unique numbered id to each of them. Each numbered id should be having prefix as thumb and screen, where screen is the expanded image and thumb is the reduced image. The event of reduced image control should be expand.. like here, for thumb142 I have used onmouseover='expandthumb(142, 500, 449);' and for reduced image I have used onmouseout='reducethumb(142);

History

Well, this is my first release. So lets hope we can make a history of this control. Any suggestions, please feel free to post.

Well, I have added another example so that it could be easier to you all about the script and the use of the script. Thanks.