Javascript: Picture Zoom

October 26, 2019

Made in 2004 by me! Zoom in on an image with mouse over.

JavaScript and CSS code are used to place each of the images and the positions. With mathematics, the code calculates and moves the picture to the proper absolute position according to the zoom rate set.

When clicking on the image; a window is opened to display the image and closes when the user navigates away.

I enjoyed writing this script because I find it very unique and completely effective for something small and different. It requires only the width of image, the desired zoom width, number of columns and the array of images you wish to use.

See it in action!


Couple of things to note and that can and probably should be improved upon:

  • The images names are loaded into an array. You are required to know how many images you want.
  • The images use thumbnails with the same image name suffixed with “_thm.jpg”.
  • Supports only jpg

The following is the script to include directly into where you want your zoom images to appear! Works great in divs.

<script>
	//Build the pop-up window to display the image
	function photowindow(image){
		myWindow=window.open("","pictureviewer","width=700,height=500,scrollbars=yes");
		writetext="<html><head><title>Sets-Design Photography &#187 On Scene<\/title><\/head>";
		writetext+="<link rel=stylesheet href='"+css+"' type='text/css'><body onBlur='window.close()'>";						
		writetext+="<div style='width:700px;position:absolute;left:0px;top:10px;'><center><img src='..\/images\/photography\/photos\/"+image+".jpg'></center><br><br>";
		writetext+="<a href='#' onclick='javascript:window.close();' class='submenu_link'>";
		writetext+="<div style='width:200;border:1px solid #CC6600;font-weight:bold;position:relative;left:250;margin-bottom:20px;text-align:center;' onmouseover=\"this.style.color='#CC6600';this.style.cursor='hand';\" onmouseout=\"this.style.color='#003366';\">CLOSE<\/div></a><\/div>";
		writetext+="<\/body><\/html>";
		myWindow.document.write(writetext);
		myWindow.document.close();
	}
	//Start Zoom Function Code
        
	Z=0; //set Z cords incrementor
	Y=-1; //set Y cord incrementor : Set to -1 for starting incrementor
	picwidth=70; //width of zoom picture
	zoomwidth=100; //desired zoom width
	marginleft=0; //set desired margin from the left
	margintop=0; //set desired margin from the top
	rownumber=7; //set desired number of rows
	
	//places images into an images array								
	images=['photo_01','photo_02','photo_03','photo_04','photo_05','photo_06','photo_07','photo_08'];
	
	//set to loop for amount of images in the images array
	for(i=0;i<images.length;i++){
	
		if(Y<rownumber){ //tests to see if Y cord mulitplier exceeds desired number of rows
			Y++; //adds one to the Y cords multiplier
		}else{
			Y=0; //resets Y cords multiplier to 0 on new row
			Z++; //adds one to the Z cords multiplier
		}
		zcords=Z*picwidth+margintop; //sets current image zcords with margin adjustment
		ycords=Y*picwidth+marginleft; //sets current image ycords with margin adjustment
		ycords_over=ycords-((zoomwidth-picwidth)/2); //sets the zoom ycords
		zcords_over=zcords-((zoomwidth-picwidth)/2); //sets the zoome zcords
		
		document.write("<a href='javascript:photowindow("+'"'+images[i]+'"'+");'><img src='../images/photography/photos/"+images[i]+"_thm.jpg' border='0' width='"+picwidth+"px' style='position:absolute;left:"+ycords+"px;top:"+zcords+"px;width:"+picwidth+";z-index:0;' onmouseover=\"this.style.width='"+zoomwidth+"px';this.style.position='absolute';this.style.left='"+ycords_over+"px';this.style.top='"+zcords_over+"px';this.style.zIndex='1';\" onmouseout=\"this.style.width='"+picwidth+"px';this.style.position='absolute';this.style.left='"+ycords+"px';this.style.top='"+zcords+"px';this.style.zIndex='0';\"></a>");
	}
</script>