Improving an Image Zooming Application with JavaScript

As I explained in the section that you just read, it's highly desirable to merge the two previous JavaScript functions into a unique one, in this way shortening the complete source code of this JavaScript application, while making it slightly more robust and efficient too.

In simple terms, the two aforementioned functions can be easily integrated into one piece of code, if they're coded in the following manner:

unction ZoomImage(inc){

var img=document.getElementById('image');

if(!img){return};

img.setAttribute('width',parseInt(img.getAttribute('width'))+inc);

img.setAttribute('height',parseInt(img.getAttribute('height'))+inc);

if(!img.style.left){img.style.left='0px'};

if(!img.style.top){img.style.top='0px'};

img.style.left=parseInt(img.style.left)-(inc/2)+'px';

img.style.top=parseInt(img.style.top)-(inc/2)+'px';

}

That was pretty simple. As you can see, now the above "ZoomImage()" JavaScript function implements all of the business logic required for zooming into and out of the selected bitmapped image. But as demonstrated in this particular case, the function in question has merged the functionality of its respective ancestors into one snippet of code.

Also, you should notice that the prior "ZoomImage()" function takes on the increment value that should be applied to the width and height attributes of the targeted image to achieve the zooming in/out effects. Of course, these can be performed by feeding the function with both positive and negative integer values, one process that is clearly illustrated by the JavaScript code below:

window.onload=function(){

var btn1=document.getElementById('button1');

if(!btn1){return};

btn1.onclick=function(){

ZoomImage(20);

}

var btn2=document.getElementById('button2');

if(!btn2){return};

btn2.onclick=function(){

ZoomImage(-20);

}

}

As shown in the above JavaScript code, each zooming button built previously is simply attached to the "ZoomImage()" function. This will cause the function to be triggered every time the button is clicked. Each zoom control will pass to the function a different zooming value that is positive or negative, depending on the type of effect that needs to be achieved.

At this stage, I believe that you already grasped the underlying logic that drives the previous "ZoomImage()" JavaScript function. As you can see, it is now capable of performing zooming in/out effects on a selected image.

So the question that comes up here is: what's the next step? Well, assuming that you understood how the previous JavaScript function works, in the last section of this tutorial I'm going to show you how this function can be linked with the other modules of this client-side zooming application, that is the pertinent structural markup and CSS styles as well.

Logically, to see the complete source code corresponding to this image zooming JavaScript application, you'll have to click on the link that appears below and read the next few lines.