I am going to tell you how to make a Simple clickable gallery in 3 steps

Step1: Make the html page[Make the container & inner element]

<div id=”wrapper” align=”center”>
<div id=”transition”>
<a id=”auto_play” href=”#”>Auto Play Slide Show</a>
<a id=”previous” href=”#”><<Previous</a>
<a id=”next” href=”#”>Next >></a>
</div>
<div id=”big_image_container” align=”center”>
<img id=”big_image” src=”image/pic1.bmp” title=”Big Image” />
</div>
<div id=”thumb_image_container”>
<img src=”image/pic1.bmp” alt=”image1″ title=”image1″ />
<img src=”image/pic2.bmp” />
<img src=”image/pic3.bmp” />
<img src=”image/pic3D26.jpg” />
</div>
</div>

Step2: Write Css[ I am writting some css script to make it nice]

#thumb_image_container{
/*float:left;*/
/*border:2px solid #efefef;*/
width:100%;
height:100%;
}

#thumb_image_container img{
border:2px solid;
margin:5px;
}

#big_image_container{
width:400px;
height:400px;
border:20px solid #CCCCCC;
margin-bottom:10px;
-moz-border-radius: 15px;
background-color:#EFEFEF;
}

#big_image{
width:400px;
height:400px;
}

#transition a{
padding-right:10px;
text-decoration:none;
font-size:14px;
color:#000000;
font-weight:bold;
}

#transition a:hover{
padding-right:20px;
/*text-decoration:underline;*/
font-size:14px;
color:#660033;
font-weight:bold;
}

Step3 : Write a js code to show big image

$(“#thumb_image_container img”).click(function()
{
var new_src = this.src;
$(‘#big_image_container img’).fadeOut(300,function(){
$(‘#big_image_container img’).attr(“src”,new_src).fadeIn(300);
});
});

Its Very Simple . Try it.

Latest posts by Sandipan Bhattacharjee

  • Share/Bookmark