How to make a gallery
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=”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]
/*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
{
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
- Dynamically Styling Modules and Blocks in Drupal 6 - September 22nd, 2011
- How to make a lightbox in a very simple way - August 19th, 2011
- How to Create Drupal Sub-themes from scratch - July 12th, 2011
- Zend framework step by step tutorial (Folder structure) - March 21st, 2011
- Zend Framework variables - March 21st, 2011
