In this tutorial we will learn how to create a simple HTML Photo Gallery using CSS and Javascript.
First, we have to create the index.html file. To do this, open a text editor (Notepad, for example) and put the next code.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>3Torials.com - How to create a valid HTML Photo Gallery for All Browsers</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<center><h1>3torials.com - Newest tutorials</h1></center>
<div id="gallery">
<div id="thumbs">
<a href="javascript: changeImage(1);"><img src="images/img1.jpg" alt="" /></a>
<a href="javascript: changeImage(2);"><img src="images/img2.jpg" alt="" /></a>
<a href="javascript: changeImage(3);"><img src="images/img3.jpg" alt="" /></a>
<a href="javascript: changeImage(4);"><img src="images/img4.jpg" alt="" /></a>
<a href="javascript: changeImage(5);"><img src="images/img5.jpg" alt="" /></a>
</div>
<div id="bigimages">
<div id="normal1">
<img src="images/img1.jpg" alt=""/>
</div>
<div id="normal2">
<img src="images/img2.jpg" alt=""/>
</div>
<div id="normal3">
<img src="images/img3.jpg" alt=""/>
</div>
<div id="normal4">
<img src="images/img4.jpg" alt=""/>
</div>
<div id="normal5">
<img src="images/img5.jpg" alt=""/>
</div>
</div>
</div>
</body>
</html>
Once you copy it, save the file as
"index.html"
The next step is the JavaScript file creation. Once again open your Notepad and paste the next code.
function changeImage(current) {
var imagesNumber = 5;
for (i=1; i<=imagesNumber; i++) {
if (i == current) {
document.getElementById("normal" + current).style.display = "block";
} else {
document.getElementById("normal" + i).style.display = "none";
}
}
}
Save the file as
"script.js"
Finally, we will create our style. Open your text editor and copy the next code:
body {
margin: 0;
padding: 0;
background: #203b39;
color: #FFF;
text-align: center;
font: normal 9pt Verdana;
}
a:link, a:visited {
color: #EEE;
}
img {
border: none;
}
#normal2, #normal3, #normal4, #normal5 {
display: none;
}
#gallery {
margin: 0 auto;
width: 800px;
}
#thumbs {
margin: 10px auto 10px auto;
text-align: center;
width: 800px;
}
#bigimages {
width: 770px;
float: left;
}
#thumbs img {
width: 130px;
height: 130px;
}
#bigimages img {
border: 4px solid #555;
margin-top: 5px;
width: 750px;
}
#thumbs a:link, #thumbs a:visited {
width: 130px;
height: 130px;
border: 6px solid #555;
margin: 6px;
float: left;
}
#thumbs a:hover {
border: 6px solid #888;
}
Save the file as
"style.css"
Now we will have these files in the same folder and also the folder with the images. So you will have something like this:
The final result should be like this:
