Working with Multiple Graphics for a Zoom Application in JavaScript - Completing the improved image zooming application
(Page 4 of 4 )
Over the course of the previous section, I said that it was necessary to assemble all of the different modules that compose this image zooming application to see more clearly how they link properly with each other. Therefore, I'm going to list the application's full source code. This way it correctly completes the development process.
Here's the entire source code required to get this zooming application working as expected. Have a look at it, please:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Zooming images with JavaScript (targets any web page element)</title>
<style type="text/css">
body{
padding: 0;
margin: 0;
background: #eee;
}
h1{
font: bold 14pt Arial, Helvetica, sans-serif;
color: #000;
text-align: center;
}
img{
position: absolute;
}
#container{
position: relative;
width: 263px;
height: 150px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
background: #9cf;
border: 1px solid #000;
}
#controlpanel{
width: 263px;
margin-left: auto;
margin-right: auto;
background: #9cf;
text-align: center;
border: 1px solid #000;
}
</style>
<script type="text/javascript">
// zoom in a selected web page element
function ZoomInElement(id,inc,maxWidth){
var elem=document.getElementById(id);
if(!elem||elem.getAttribute('width')>=maxWidth){return};
elem.setAttribute('width',parseInt(elem.getAttribute('width'))+inc);
elem.setAttribute('height',parseInt(elem.getAttribute('height'))+inc);
if(!elem.style.left){elem.style.left='0px'};
if(!elem.style.top){elem.style.top='0px'};
elem.style.left=parseInt(elem.style.left)-(inc/2)+'px';
elem.style.top=parseInt(elem.style.top)-(inc/2)+'px';
}
// zoom out a selected web page element
function ZoomOutElement(id,inc,minWidth){
var elem=document.getElementById(id);
if(!elem||elem.getAttribute('width')<=minWidth){return};
elem.setAttribute('width',parseInt(elem.getAttribute('width'))-inc);
elem.setAttribute('height',parseInt(elem.getAttribute('height'))-inc);
if(!elem.style.left){elem.style.left='0px'};
if(!elem.style.top){elem.style.top='0px'};
elem.style.left=parseInt(elem.style.left)+(inc/2)+'px';
elem.style.top=parseInt(elem.style.top)+(inc/2)+'px';
}
window.onload=function(){
var btn1=document.getElementById('button1');
if(!btn1){return};
btn1.onclick=function(){
ZoomInElement('image',20,800);
}
var btn2=document.getElementById('button2');
if(!btn2){return};
btn2.onclick=function(){
ZoomOutElement('image',20,263);
}
}
</script>
</head>
<body>
<h1>Zooming elements with JavaScript (targets any web page element)</h1>
<div id="container"><img src="sample_image.jpg" width="263" height="150" id="image" /></div>
<div id="controlpanel">
<p><input type="button" id="button1" value="+" /><input type="button" id="button2" value="-" /></p>
</div>
</body>
</html>
As shown in the above (X)HTML file, the zooming application is basically made up of three modules: the pertinent CSS styles, then the corresponding structural markup, and finally the JavaScript code, which as you learned earlier, comes in handy for performing a pretty realistic zoom in/out effect on any bit-mapped image included in a given web page.
It's worthwhile to mention that in the previous example I only used one sample image to demonstrate how the zooming application functions. But this condition can be easily modified to apply the effect to several graphics simultaneously.
And finally, as usual with most of my articles on web development, please feel free to introduce your own modifications to all the code samples developed here so you can eventually improve the overall functionality of this image zooming application.
Final thoughts
That's all for now. In this third part of the series, I gave the previous image zooming application the capacity to apply this visual effect to several graphics included in a particular web page.
However, this instructive journey hasn't ended yet, since there's one important issue to fix. As you may have noticed, the zooming in/out effect is fired up when any of the respective zoom controls is clicked on, which at first glance seems to be the correct approach. Actually, these controls should be created dynamically with the DOM, instead of being included directly into the structural markup.
Thus, in the final installment of this series I'm going to introduce the last modification to the business logic of this zooming application so that the pertinent zoom controls can be dynamically built with the assistance of JavaScript.
Now that you're aware of the topic that will be covered in the last tutorial of the series, you won't want to miss it!
| DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware. |
