<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
<title>Thumbnail Gallery with transparent fading caption</title>
<script src="js/jquery-1.3.1.min.js"></script>

<script>

$(document).ready(function() {

	//move the image in pixel
	var move = -15;
	
	//zoom percentage, 1.2 =120%
	var zoom = 1.2;

	//On mouse over those thumbnail
	$('.item').hover(function() {
		
		//Set the width and height according to the zoom percentage
		//width = $('.item').width() * zoom;
		//height = $('.item').height() * zoom;
		
		//Move and zoom the image
		//$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:200});
		
		//Display the caption
		$(this).find('div.caption').stop(false,true).fadeIn(200);
	},
	function() {
		//Reset the image
		//$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:100});	

		//Hide the caption
		$(this).find('div.caption').stop(false,true).fadeOut(200);
	});

});

</script>

<script  language="JavaScript">  
<!--  

var  flag=false;  
function  DrawImage(ImgD){  
     var  image=new Image();  
     image.src=ImgD.src; 
         //document.sendimg.width.value	= image.width;
       //document.sendimg.height.value	= image.height;
        //alert(ImgD.width);
     
     if(image.width>0  &&  image.height>0){  
       flag=true;  
       if(image.width/image.height>=  125/125){  
         if(image.width>125){      
         ImgD.width=125;  
         ImgD.height=125;  
         }else{  
         ImgD.width=image.width;      
         ImgD.height=image.height;  
         }  
         ImgD.alt=image.width+"กม"+image.height;  
         }  
       else{  
         if(image.height>125){      
         ImgD.height=125;  
         ImgD.width=125;          
         }else{  
         ImgD.width=image.width;      
         ImgD.height=image.height;  
         }  
         ImgD.alt=image.width+"กม"+image.height;  
         }  
       }  
       
     
}    
//-->  
</script>

<style>
body {
	font-family:arial;
	background-color:#313131;	
	margin:0px 0px 0px 0;
}

.item {
	width:125px;
	height:125px;	
	border:4px solid #222;	
	margin:0px 0px 0px 0;
	background:#000 url(imgbg.jpg) no-repeat center center;
	/* required to hide the image after resized */
	overflow:hidden;
	
	/* for child absolute position */
	position:relative;
	
	/* display div in line */
	float:left;
}

.item .caption {
	width:125px;
	height:125px;
	background:#000;
	color:#fff;
	font-weight:normal;
	cursor:hand;
	/* fix it at the bottom */
	position:absolute;
	left:0;
	background:#000 url(picbg.jpg) no-repeat center center;
	/* hide it by default */
	display:none;
	/* opacity setting */
	filter:alpha(opacity=80);    /* ie  */
	-moz-opacity:0.8;    /* old mozilla browser like netscape  */
	-khtml-opacity: 0.8;    /* for really really old safari */  
	opacity: 0.8;    /* css standard, currently it works in most modern browsers like firefox,  */

}

.item .caption a {
	text-decoration:none;
	color:#5f5f5f;
	font-size:12px;	
	/* add spacing and make the whole row clickable*/
	padding:5px;
	display:block;
}

.item .caption p {
	padding:5px;	
	margin:0;
	font-size:12px;
	
}

img {
	border:0;
	/* allow javascript moves the img position*/
position:absolute;
}


.clear {
	clear:both;	
}
</style>
</head>

<body>

<!-QQIMGCONTENT-!>

<div class="clear"></div>
<span style="position: absolute; right: 280px; z-index: 10000;cursor:hand;"><a href="app_lppage:"><img src="last.jpg"></a></span>
<span style="position: absolute; right: 204px; z-index: 10000; cursor:hand;"><a href="app_lnpage:"><img src="next.jpg"></a></span>

</body>
</html>

