Click here to Skip to main content
Click here to Skip to main content

Expanding Image Animator

, 15 Mar 2008 CPOL
Rate this:
Please Sign up or sign in to vote.
Animation of an image. Using multiple images as thumbnails, you can enlarge it to a specific size.

Introduction

The article illustrates a JavaScript that will help you to animate your images or any display article like a div from a specified size to another size. This enable you to make a dynamic web page where pictures blow up from a thumbnail view to a full image. Just check out my code.

Background

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

Using the code

Well, using this code, you can show an image in your web page with an animation within it. When using this code, there are two things you need to remember: for each image, you need two img tags, one to show the expanded image (screen + value), and another for the reduced image (thumb + value). Passing a value to the expanded image will display the enlarged image to screen+val. So, you need to use the expanded image on an event of thumb + val. And screen + val when you need to use the smaller image.

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

// 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
    };
  }
}

Here is the HTML file:

<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 mouseover to expand an image from thumb142 where 142 is the argument, and same to onmouseout in screen142.

Check out the snapshots of the application:

Screenshot - coolimage1.jpg

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:

Screenshot - coolimage2.jpg

Thus, the second image will be seen when the 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: demo.

The snapshot of this download is:

Screenshot - coolimage3.jpg

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 img tags for each image to be shown, and then give a unique numbered ID to each of them. Each ID should have a prefix as thumb and screen, where screen is the expanded image and thumb is the reduced image.

History

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

I have added another example so that it would be easier to use the script. Thanks.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Abhishek Sur
Architect
India India
Did you like his post?
 
Oh, lets go a bit further to know him better.
Visit his Website : www.abhisheksur.com to know more about Abhishek.
 
Abhishek also authored a book on .NET 4.5 Features and recommends you to read it, you will learn a lot from it.
http://bit.ly/EXPERTCookBook
 
Basically he is from India, who loves to explore the .NET world. He loves to code and in his leisure you always find him talking about technical stuffs.
 
Presently he is working in WPF, a new foundation to UI development, but mostly he likes to work on architecture and business classes. ASP.NET is one of his strength as well.
Have any problem? Write to him in his Forum.
 
You can also mail him directly to abhi2434@yahoo.com
 
Want a Coder like him for your project?
Drop him a mail to contact@abhisheksur.com
 
Visit His Blog

Dotnet Tricks and Tips



Dont forget to vote or share your comments about his Writing
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralThanks and Question Pinmemberaim7312-Jun-08 12:25 
AnswerRe: Thanks and Question [modified] PinmemberAbhishek sur13-Jul-08 22:27 
Generalasp.net Pinmembereirikr19-Dec-07 3:04 
GeneralRe: asp.net PinmemberAbhishek sur13-Jul-08 22:28 
QuestionNice attempt Pinmemberksawme27-Sep-07 17:48 
AnswerRe: Nice attempt PinmemberAbhishek sur27-Sep-07 20:31 
Generalscreenshot Pinmvptoxcct18-Sep-07 23:59 
GeneralRe: screenshot PinmemberAbhishek sur19-Sep-07 0:02 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web04 | 2.8.141022.2 | Last Updated 15 Mar 2008
Article Copyright 2007 by Abhishek Sur
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid