This blog is about creating a beautiful gallery and the best thing is that there is no JavaScript in it, even a single line of code.
I am simply using HTML and CSS
HTML Code:
It consist of two block of pictures. You just have to click left side of block which contains small pics in order to switch between images. Here's a code:
<div id="Gallery">
<ul id="navigation">
<li><a href="#pic1"><img alt="" src="small_Tom.jpg" /></a></li>
<li><a href="#pic2"><img alt="" src="small_Jerry.jpg" /></a></li>
<li><a href="#pic3"><img alt="" src="small_Dexter.jpg" /></a></li>
<li><a href="#pic4"><img alt="" src="small_Popeye.jpg" /></a></li>
<li><a href="#pic5"><img alt="" src="small_Minions.jpg" /></a></li>
</ul>
<div id="Full-Pics">
<div><a name="pic1"></a><img alt="" src="large_Tom.jpg" /></div>
<div><a name="pic2"></a><img alt="" src="large_Jerry.jpg" /></div>
<div><a name="pic3"></a><img alt="" src="large_Dexter.jpg" /></div>
<div><a name="pic4"></a><img alt="" src="large_Popeye.jpg" /></div>
<div><a name="pic5"></a><img alt="" src="large_Minions.jpg" /></div>
</div>
</div>
CSS Code:
CSS is used for defining size as well as the other designing conditions. Here's a code:
#Gallery
{
width: 800px;
overflow: hidden;
position: relative;
z-index: 1;
margin: 100px auto;
border: 1px solid #003C72;
}
#navigation
{
list-style: none;
padding: 0;
margin: 0;
float: left;
}
#navigation li
{
padding: 0;
margin: 0;
float: left;
clear: both;
}
#navigation li a img
{
display: block;
border: none;
}
#navigation li a
{
display: block;
}
#full-picture
{
width: 500px;
height: 375px;
overflow: hidden;
float: left;
}