Thumbnail image gallery with jquery is jquery ,html and css based Image gallery.this Image Gallery has image Grid,and when we hover over these images these zoom out like it  happens in Google images.when we click on the image on the thumbnail Image Gallery then that image shows up in higher resolutions on right hand side.the effect I used here for images is the fade in , fade out and fadeto of the jquery when image shows up in high res adjacent to grid.

the Thumbnail Image gallery with jquery will look like the image below:

 

when we gonna click on thumbnail then the that image will show up in the box next to the grid.it exactly look like the image given below.you can see the fading effect in this image given below.

The code is very easy.every one can easily understand the code.i have posted all the code below you can just copy pste the code or download the source from the link given at the end of the post.

see the full code listing:

THE HTML:

<div id="bigbox">

<ul id="box">
	<li><img src="images/12.jpg" title="abstract"/></li>
	<li><img src="images/13.jpg" title="abstract"/></li>
	<li><img src="images/14.jpg"  title="abstract"/></li>
	<li><img src="images/15.jpg" title="abstract"/></li>
	<li><img src="images/16.jpg" title="abstract"/></li>
	<li><img src="images/17.jpg" title="abstract"/></li>
	<li><img src="images/18.jpg" title="abstract"/></li>
	<li><img src="images/19.jpg" title="abstract"/></li>
	<li><img src="images/20.jpg" title="abstract"/></li>
</ul>
<div id="box2">
<img src="images/12.jpg" title="cars" />
</div>
</div>

THE CSS:

#box
 {
 width:400px;
 height:600px;
 float:left;
 }
 #box li {
	margin: 5; padding: 2px;
	float: left;
	left:20px;
	top:50px;
	position: relative; 
	width: 110px;
	height: 110px;
	display:inline;
}
#box li img
 {
 width: 100px;
 height: 100px;
cursor:pointer;
position: absolute;
left: 0; top: 0;
display:inline;
 }
 #box2
 {
 position:relative;
 float:left;
left:30px;
top:50px;
 width:500px;
text-align:center;
 padding:2px;
 }
 
 #box2 img
 {
 width:600px;
 cursor:pointer;
 border:2px solid white;
 }
  #box img:hover
 {
border:2px solid white;
margin-top:5px;
margin-left:5px;
margin-right:5px;
margin-bottom:5px;
 }
 #bigbox
 {
 overflow:hidden;
 }

 

Jquery/Javascript code:

In jquery code for Thumbnail picture gallery,when we click on thumbnail photo then we return the src attribute of that photo and that src attribute is send to that adjacent right side box to the picture grid.means the src attribute is changed on the big image in this thumbnail image gallery.Also when we click on big image then also the image changes,that happens cause we have collected src of all the images inside ul element with id 'box' to an array.

when ever the big picture is clicked that random iamge is choosen from the array.i hope every one knows the concept of array in jquery.actually thats just same as in c++. 

$(document).ready(
 function()
	{
	 $("#box img").click(
			function()
				{
				
					var sr=$(this).attr("src");						
					//alert(sr);
					$("#box2 img").fadeOut("slow",function(){
					$("#box2").html("<img src='"+sr+"' style='opacity:0.30'/>");
					$("#box2 img").fadeTo("slow",1);
					});	
					
					
				}
		);
		$("#box img").hover(
			function()
			{
				$(this).css({'z-index' : '10','border':'4px solid white'});
				$(this).animate({
				marginTop: '-110px', 
			marginLeft: '-110px',
			top: '50%',
			left: '50%',
			width: '200px', 
			height: '200px'			
			},200);
			},function()
				{
					$(this).css({'z-index' : '0','border':'none'}); 
			
				$(this).animate({
					marginTop: '0', 
			marginLeft: '0',
			top: '0',
			left: '0',
			width: '100px', 
			height: '100px'
			
		}, 400);
				}
		);
				
		
	//click on the image
		var length=$("#box img").length;
		var myimage=new Array();
		$("#box img").each(function(n){
				myimage[n+1]=$("#box img:eq("+n+")").attr("src");//alert(myimage[n]);
			});
		$("#box2 img").live('click',function()
				{
				var r=Math.ceil(length*Math.random());
					$("#box2 img").fadeOut("slow",function(){
					$("#box2").html("<img src='"+myimage[r]+"' style='opacity:0'/>");
					$("#box2 img").fadeTo("slow",1);
					});	
				}
			);	
	} 
 );

 

That was the all code.you would also be eager to see the demo and download link for this one.that is below.

 

LIVE DEMO OR DOWNLOAD Thumbnail Image Gallery:

 

LIVE DEMO DOWNLOAD

 

Please hit like and do comment if you like or if you have any problem dont hesitate to ask.i hope you will like this one.may be all begginers find it interesting...