How to Create A JavaScript Image Viewer How to Create A JavaScript Web Page Screen Saver | 2

[previous][next]

How to Create a JavaScript Image Viewer

ImageExpander.prototype.expand = function()

{

// set direction of expansion.

this.bExpand = true;

// set all other images to reduce

for ( var i in window.aImageExpanders )

if ( window.aImageExpanders[i] !== this )

window.aImageExpanders[i].reduce();

// if not loaded, don't continue just yet

if ( !this.oDiv ) return;

// hide the thumbnail

this.oThumb.style.visibility = "hidden";

// calculate initial dimensions

this.x = this.oThumb.offsetLeft;

this.y = this.oThumb.offsetTop;

this.w = this.oThumb.clientWidth;

this.h = this.oThumb.clientHeight;

this.oDiv.style.left = this.x + "px";

this.oDiv.style.top = this.y + "px";

this.oImg.style.width = this.w + "px";

this.oImg.style.height = this.h + "px";

this.oDiv.style.visibility = "visible";

this.oImg.style.visibility = "visible";

// start the animation engine.

if ( !this.bTicks )

{

this.bTicks = true;

var pThis = this;

window.setTimeout(function(){pThis.tick();},25);

}

The expand method first sets the this.bExpand flag to true so that the animation engine knows which direction it is going and then forces all other ImageExpander objects to reduce. It is possible that this method may be called before the image has downloaded so a check is done at this point and the method is exited if not ready. Otherwise the thumbnail is hidden (although it will continue to take up browser space) and the initial position and size of the full size image are set to match the thumbnail. Then the animation engine is started to manage the expansion of the image to full size.

ImageExpander.prototype.reduce = function()

{

// set direction of expansion.

this.bExpand = false;

}

All that is needed to reduce an image is to set the this.bExpand flag to false. If the full size image is visible, then the animation engine will already be running and changing this flag will control its direction. If the thumbnail image is visible, then there is nothing to do as the image is already reduced as far as it should go.

The animation engine is contained in a single method of the ImageExpander object called tick. As its name suggests, this function is called repeatedly at fast enough intervals to make the image movements it controls appear to be smooth.

ImageExpander.prototype.tick = function()

{

// calculate screen dimensions

var cw = document.body.clientWidth;

var ch = document.body.clientHeight;

var cx = document.body.scrollLeft + cw / 2;

var cy = document.body.scrollTop + ch / 2;

The first thing the tick does is to calculate the browser page dimensions – at least that part that is visible to the user.

The next task is to calculate the target size and position; this will depend on the direction of the animation defined by the this.bExpand flag.

If the image is expanding then the original dimensions of the image are taken and then reduced to fit the page if necessary:

// calculate target

var tw,th,tx,ty;

if ( this.bExpand )

{

// start with the full size dimensions

tw = this.bigWidth;

th = this.bigHeight;

// reduce to fit the screen

if ( tw > cw )

{

th *= cw / tw;

tw = cw;

}

if ( th > ch )

{

tw *= ch / th;

th = ch;

}

// then center it on the page

tx = cx - tw / 2;

ty = cy - th / 2;

}

Otherwise the current size and location of the thumbnail image are used. Note that if the browser window changes size, then the actual position of the thumbnail can change accordingly, so this must be calculated for each tick.

else

{

tw = this.smallWidth;

th = this.smallHeight;

tx = this.oThumb.offsetLeft;

ty = this.oThumb.offsetTop;

}

Once the target size and position are calculated, we can use some algorithm to move the full size image towards the target. In the following code, each dimension; left, top, width and height are moved 10% closer to its target. While 10% might sound like a lot, the size of movement will reduce as the target comes closer, so the effect is to start with an initial burst of speed and then slowing down as it approaches the target position and size.

The algorithm below is contained inside a nested function which is assigned to the variable fMove. This function operates on each dimension and does two things: it calculates the value 10% closer to the target and counts the dimensions that a getting very close to the target value – less than three pixels away. This count is declared outside the function but it is still accessible as nested functions have access to the context in which they are defined.

// move 10% closer to target

var nHit = 0;

var fMove = function(n,tn)

{

var dn = tn - n;

if ( Math.abs(dn) < 3 )

{

nHit++;

return tn;

}

else

{

return n + dn / 10;

}

this.x = fMove(this.x, tx);

this.y = fMove(this.y, ty);

this.w = fMove(this.w, tw);

this.h = fMove(this.h, th);