Here I have used html and CSS to create this image gallery.
You can view Demo here
Demo URL : http://www.nimesha.comyr.com/projects/Imagegallery

It will load image without refreshing the page.
Here I have coded everything manually.But we can use a samall php script to load images.
I will post it in my next blog post.
*** NOTE : ***
We need to create a folder called "images".There we have to add large images and small images.

HTML CODE:

<html>

<head>

<style type="text/css">

img { border: 1px solid #000 }



#gallery img {

margin: 10px;

width: 85px;

height: 85px

}



#enlarge img {

width: 200px;

height: 200px;

}



</style>

</head>



<body>



<table>

<tr width="500">

<td width="45%" align="center">

<div id="enlarge">

<!--This is the display Image when the page loads-->

<img name="LargeImage" src="images/8.jpg" />

</div>

</td>



<td cellspacing=50>



<div id="gallery">

<!--This is the large image link-->

<a href="#" onclick="LargeImage.src='images/8.jpg'">

<!--This is the small image-->

<img src="images/88.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/2.jpg'">

<img src="images/22.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/3.jpg'">

<img src="images/33.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/4.jpg'">

<img src="images/44.jpg" />

</a> <br>



<a href="#" onclick="LargeImage.src='images/5.jpg'">

<img src="images/55.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/6.jpg'">

<img src="images/66.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/1.jpg'">

<img src="images/11.jpg" />

</a>



<a href="#" onclick="LargeImage.src='images/9.jpg'">

<img src="images/99.jpg" />

</a>



</div>



</td>

</tr>

</table>



</body>

</html>