How to create HTML Photo Gallery for All Browsers
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
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”. Make sure first before copying the text below, to set the File Encoding to UTF-8. In Notepad++ you have the Encoding Tab in the top menu. You can select the UTF-8 from there.
<!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
Hello!
Nice tutorial, Thank you!
I have few question and i will appreciate you if you can answer it.
1) Is there a possibility to add facebook like and share for each image ?
2) Can i change the position of the big image from bottom to right or left for example ?
Thank you!
Hello Andrew!
Thank you for your comment. To answer on your questions:
1) Yes is it possible, you just need to do some tricks with the Facebook Share Link.
2) Yes that is possible too. Adjust the HTML and CSS in order to achieve that.
We can offer you assistance via chat on Skype.
Hello, thank you for this amazing tutorial, It was nice to find one that involved JS that wasn’t too technical!!
I tried this the other day and remarkably got it to work!
So thank you very much,
There is an additional problem im having issues with though, if you have a minute.
Everytime I click for a new picture, I would like text to appear below the main image that is relevent to what is being shown.
I just cannot seem to find a way to do this,!!
Also, would you be able to direct me to a tutorial that is easily applicable to this tutorial on how to insert a scroll element to the thumb gallery so Ican have more than one page.
If you have a minute, I have included the link to my site below so you can see my problem.
Thank you very much for your help, here is the link!
http://vaughnwinnproduction.co.uk/jonnyspry/Portfoliopage.html
Hello Jonny,
In every div with big images, under the image you can insert everything you want. You can even delete the image and put only text in that div.
The next tutorial will be about creating a photo gallery with a scroll bar, so subscribe on the sidebar.
Ah I see, thank you! I had the wrong logic thinking about it.
Works perfectly, thank you very much :)
Very good site, this.
hello. I am using Dreamweaver CS6 to create this photo gallery, but it does not seem to work. is there anything I can do. Also, do my images have to be a certain size? Or should I have the same image in two different sizes? Thanks
Hello alcione,
You can use any size you want, as long as you have the divs like in the tutorial. Maybe you have something wrong in your code.
Thank you so much for this easy to follow tutorial. The example provided is easily adapted and works on literally every current standard browser. Even mobile browsers.
Having broke it down to an empty snippet for the sake of being able to rapidly produce ten separate galleries of 5 to 30 images each (this was a very last minute and temporary solution to a flash linkage failure that I couldn’t resolve), it seems like it should be pretty simple to externalize this to a javascript for loop in the switchWhateverImage() function; loading the name and src/url properties from an xml file.
So again, thanks a ton.
Maybe an email where I can send it? Sorry not uploaded yet… =/
Hello Isabel,
You can use our support email from contact page.
Thank you for such a great tutorial! I am trying to make a few changes to the design, as I need the gallery to be in a table (only two columns), the thumbnails to show on the left and the full sized image on the right, but I only get to have the image on the right on the same thumbnail size… how could I do it? Hope is not very confusing description! =)
Hello Isabel,
Maybe you have something wrong in your HTML or CSS, so double check it. Do you have the code somewhere uploaded so we can check it for you ?
I am having the same problem as Keshan. When I click a thumbnail, the big image does not change.
Hello Alex,
Can we check your files? Or if you have a link where you have those files uploaded it will be great.
Here is a link to the jsbin edit page. http://jsbin.com/ihuzuf/3/edit any help would be greatly appreciated
Your code is not working because you have a wrong letter in your JavaScript function name:
function changeImage(current) {should be changed with a lowercase “i”, you need to keep the same name everywhere in the code. Check below:
function changeimage(current) {Oh, alright. I didn’t realize that it wasn’t the same. Thanks a lot for the help and quick response.
Glad we could help you! Like us ok Facebook to stay updated with more new tutorials!
when i load it in the browser.big image is showing but in thumblines doesn’t load the image.
why is that ? what should i do for it.
Hello Keshan,
Maybe there is something wrong with your code, or images. Check the source of your images and update accordingly.