| home / programming / javascript / gr / column8 / 1 |   [previous] |
|
|
|
If the image is reducing and all four dimensions (left, top, width and height) have hit their target, then the animation engine is stopped by switching off the this.bTicks flag, hiding the full size image and showing the thumbnail again. Expanding images stay active in case the user changes the size of the browser window.
// if reducing and size/position is a match, stop the tick
if ( !this.bExpand && (nHit == 4) )
{
this.oImg.style.visibility = "hidden";
this.oDiv.style.visibility = "hidden";
this.oThumb.style.visibility = "visible";
this.bTicks = false;
}
Finally, if still active, the animation engine schedules another tick a short time in the future.
if ( this.bTicks )
{
var pThis = this;
window.setTimeout(function(){pThis.tick();},25);
}
}
Now, with this code in place, all that is left is to design the layout of the web page, taking advantage of the extra space resulting from the smaller thumbnail images. Remember to enclose each thumbnail in a link tag to cater for those users who do not have JavaScript.
In this article I have presented a JavaScript class that will manage a pair of images; a full-sized image and its thumbnail. When the user clicks on the thumbnail, the ImageExpander code will enlarge the image until it either fills the browser or reaches its full size – whichever comes first. A second click on the image or clicking on another thumbnail reduces the image back to its original position.
To see a working demonstration of this code, click here.
I have endeavored to make this code as browser compatible as possible, meaning that it’s been tested with the latest versions of Internet Explorer (6.0) and Netscape (7.1) – this accounts for over 80% of users).
Guyon Roche is a freelance web developer in London, Great
Britain. He specializes in Windows platforms with an interest in bridging the
gaps between different technologies, visit www.silver-daggers.co.uk for more
details. He can be reached via e-mail at guyonroche@silver-daggers.co.uk
| home / programming / javascript / gr / column8 / 1 | [previous] |
| ||||||||||||||||||||
URL: http://webreference.com/programming/javascript/gr/column8/1
