In this tutorial we will learn how to create a simple HTML Photo Gallery using CSS and Javascript, valid and compatible with all browser including Internet Explorer 6,7 and 8.
Step 1
This gallery would be great for anyone taking online college classes in art, graphic design, or web design to showcase their work.
First of all we will need 3 files, one folder and some images for our gallery.
Step 2
We need to set the HTML page by writing the following code below to “index.html”:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>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> <div id="gallery"> <div id="thumbs"> <a href="javascript: changeImage(1);"><img src="images/image1.png" alt="" /></a> <a href="javascript: changeImage(2);"><img src="images/image2.png" alt="" /></a> <a href="javascript: changeImage(3);"><img src="images/image3.png" alt="" /></a> <a href="javascript: changeImage(4);"><img src="images/image4.png" alt="" /></a> <a href="javascript: changeImage(5);"><img src="images/image5.png" alt="" /></a> </div> <div id="bigimages"> <div id="normal1"> <img src="images/bigimage1.png" alt=""/> </div> <div id="normal2"> <img src="images/bigimage2.png" alt=""/> </div> <div id="normal3"> <img src="images/bigimage3.png" alt=""/> </div> <div id="normal4"> <img src="images/bigimage4.png" alt=""/> </div> <div id="normal5"> <img src="images/bigimage5.png" alt=""/> </div> </div> </div> </body> </html>
Step 3
Maybe you’ve noticed the code inside the href attribute of <a> tag
<a href="javascript: changeImage(1);"><img src="images/image1.png" alt="" /></a>
We will create a function in JavaScript with a global variable which is the number of our image. For this you need to name your big images with a number at the end (For example: image1.png, image2.png etc).
Write the code below in “script.js”:
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";
}
}
}
Step 4
Now lets style our working Photo Gallery. Copy the code below in “style.css”:
body {
margin: 0;
padding: 0;
background: #222;
color: #EEE;
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;
}
Our Photo Gallery is now ready ! You can test it in any browser.
Live Demo
Download Files
Extending this technique you can make a ldoaing image appear while the image is ldoaing, and then switch in the image after it has loaded:var $image = $( ).css({ display: none’ }).attr({src: path/to/image.png’,alt: description of image’});var $loader = $( ).attr({src: path/to/loader.gif’});$(this).append($loader).append($image.load(function() {$loader.remove();$image.css({ display: inline-block’ });}));Or you could use inline’ or block’ for the final display property of the image, whatever matches your requirements.