Add Zooming Feature To You Web Images

Today we will discuss how to do simple zooming of the images using one of existing java script libraries to do this, the advantage of the selected one, is that it do the zooming without the need to have 2 versions of the images one is large and another small one...

Let's define the easiest simple steps to do it:

NOTE: the selected library URL: http://www.dynamicdrive.com/dynamicindex4/imagepanner.htm , you may go open it and you will see other steps listed there as well.


1.Place the following 2 images in your web application images folder.




2.Download the Java Script files:

http://www.dynamicdrive.com/dynamicindex4/imagepanner.js
http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js


3.Edit the JavaScript file : imagepanner.js to point to the correct folder of the 2 images

//this line need to be fixed
magnifyicons: ['magnify.gif','magnify2.gif', 24,23],

4.In the head of your page or in the imported CSS file:

(You may wish to change the width and height according to the available size on the web page, and alter the border to be dotted or not , its size ...etc.)

<style type="text/css">
/*Default CSS for pan containers*/
.pancontainer{
position:relative; /*keep this intact*/
overflow:hidden; /*keep this intact*/
width:300px;
height:300px;
border:1px dotted black;
}
</style>

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="imagepanner.js">

/***********************************************
* Simple Image Panner and Zoomer- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>


5.Surround the image by the following div:
<div class="pancontainer" data-orient="center" data-canzoom="yes" style="width:400px; height:300px;">

(Adjust also here width and height of the container)

<img src="image URL here"/>

</div>

Of course you can have image URL to a servlet that return a stream of bytes of the image and set the content type of this stream as the image type, so it become dynamic zooming ability..

At the end, don't forget to keep the copyright notice!