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.
Files Needed
First of all we will need 3 files, one folder and some images for our html photo gallery.
HTML Code for our Photo Gallery
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>
Adding JavaScript to the Gallery
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";
}
}
}Adding Styles to HTML Photo Gallery
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;
}Final Results
Our valid HTML photo gallery is now ready ! You can test it in any browser to check if everything works ok.
Update: You can check my newest tutorial with a complete photo gallery here or you can view the video tutorial below.
I have 116 photos, all different sizes. Is it possible to have the thumbs auto size to the photo width and show just a horizontal scroll bar for the overflow?
Hello Dom,
Yes, it is possible. You need to adjust the CSS a little. I suggest you to place the thumbnails to the right and add the overflow as the images are different in width and height, is better to have the same small width and variable height.
Hello and great gallery. I have one thing I need and was hoping someone could help. How do I make the thumbnail border color change when its click and stay that way until another thumbnail is clicked? I basically need some kind of selected or active border style. Please and Thank You.
Hello William,
Just add an unique ID attribute to every thumb <a>, such as id=”thumb1″ and so on.
Then you can edit your Javascript code to add border color when you click the thumb and to remove it from the other elements, like this:
if (i == current) { document.getElementById("normal" + current).style.display = "block"; document.getElementById("thumb" + current).style.borderColor = "#F00"; } else { document.getElementById("normal" + i).style.display = "none"; document.getElementById("thumb" + i).style.borderColor = ""; }Here is a quick demo: http://codepen.io/anon/pen/LVWEBV
Awesome! Thank you very much.
Hi, love the tut it’s really great and works perfectly. I’ve moved the thumbs to be a vertical list on the left side.. but each time I try to add a vertical scrollbar the big image moves itself down the page – with the top starting at the bottom of the thumbs div… do you know how to fix this?
For the scrollbar I used:
in the #thumbs css
Hi Bella,
Not sure what to tell you, need to see the page in action. Do you have a link where I can take a look?
Or you can add your code to CodePen or jsFiddle and paste the link here.
It’s not a live site so copied the code: https://jsfiddle.net/rdLy2adh/1/
You added absolute position to your elements which you don’t need it. Also the big image comes after thumbnails because there was not enough room in the right, and you added float: center instead of left.
I did some changes in your file, here it is:
http://codepen.io/anon/pen/oXzvVO
Let me know if is ok now.
Thanks! It kind of worked – it was definitely the float I had wrong, but I had to do some more fiddling to position it still… so thank you for that :) although I have now developed another problem by fixing it, and that is that the page itself is now wider than it should be and an automatic scrollbar is down the bottom so you can scroll to the right side of the page, however there is nothing actually on that side so I can’t really understand why it is doing this:
https://jsfiddle.net/rdLy2adh/4/
Hello again Bella,
Check the #header div. It has 1350 pixels width. Maybe that is the cause. Also, you have a lot of problems in your CSS. For example, elements shouldn’t be positioned using position absolute only in rare cases, because they can brake the page. And <head> tag is inside the <body> tag. It should be above.
I can help you with your website to get it done in the correct way, guiding you via email also.
I’ve integrated your code into my web page, looking at source view, I can see the html changing as it should when you click on thumbnails but the larger image does not change.
Any advice?
Hello Gabe,
It must be a problem with CSS, not sure. Do you have a link where I can look at it? Or you can write your code on CodePen or jsFiddle and paste the link here.
Here is the css used for the image gallery, I did change the names of some of the divs to something that would be easier for me to remember. I’ve looked over multiple times but I may have missed something
img { border: none; } #normal2, #normal3, #normal4, #normal5 { display:none; } #gallery { margin: 0 auto; width: 800px; } #thumbN { margin: 10px auto 10px auto; text-align: center; width:800 px; } #bigImages { width: 770px; float: left; } #thumbN img { width: 130px; height: 130px; } #bigImages img{ border: 4px solid #B80000; margin-top: 5px; width: 750px; } #thumbN a:link, #thumbN a:visited{ width: 130px; height: 130px; border: 6px solid #B80000; margin: 6px; float: left; } #thumbN a:hover { opacity:0.4; filter:alpha(opacity=40); }Here’s a bit from my html
Javascript is being linked in the footer
Looks like I got it, I wasn’t using separate image files for the “bigimages” section. I was expecting to be able to just resize and re use the same image multiple times. Thanks for the help anyways
Gabe
Great! I was about to write you that the code pasted above is just fine.
Your Javascript might not be linked properly? I had the same problem and it ended up being the link to the Javascript.
Hi Dan,
I have no idea about JavaScript so I will ask for your help.
How to get this gallery without thumbs? I just want a prev and next link. Can you help? Thanks.
Hello Yli,
I would suggest you to use my newest tutorial http://html-tuts.com/jquery-image-slider/ which have the full functionality, including slideshow. You can just remove the thumbnails code and other things you don’t use it. If you want to discuss separately, leave me a comment with your e-mail (I will not publish it here) so I can contact you.
Great tutorial, I have just one question I would love to have the thumbs under each other and the big image on the right site next to it how would i need to do that.
Hello Jessi,
Sorry for my late response. Here is a quick solution for your question: http://codepen.io/anon/pen/bNRYzM
Let me know if is what you need. I recently published a newer article with a more advanced image gallery. You shuold check it.
None of the examples have captions. How can I add popup captions to each of the bigimages/preview?
Hello James,
You are right, none of the examples have captions, so I updated my new tutorial http://html-tuts.com/jquery-image-slider/ and now you can add descriptions for your images too. Check it out and let me know.
great tutorial, thanks so much
i am working on a gallery that would have about 50 pictures, is there a way to put a scrolling button for the thumbs horizonatlly placed, at the extreme left and extreme right? Or how would this accomodate about 50 pictures and be convenient to navigate through?
thanks
Hello Alex,
There is an easy solution for your problem. Inside the thumbnails container <div id="thumbs"> create a new <div> with the width of your total thumbnails. For example if you have 50 images, and each image has 142 pixels width, you can do the math (50×142 = 7100 pixels width).
You will also need to add overflow: auto; to <div id="thumbs">.
Here is a sample image:
thank you so much, i have done that, but how do i insert the scroller, or the navigation buttons?
Hi I have the same question as Alex. Is there any way you could post the code you used for this?
Thank you in advance!
Hello Sarah,
I wrote the changes here http://codepen.io/anon/pen/YXvjKY on CodePen. Added a new div “thumbsWrapper” with auto overflow (for the scroll) and the thumbnails container must have the total width of all thumbs.
For example, we have 10 thumbnails with 142 pixels width + 12px from margins. So, a total of 1540 pixels. You can check the code better on the link above.
Hi,
Thanks, so much for this tutorial. It is the best i have found. I was just wondering if it was okay to use this on my website to advertise my business.
Many thanks
So I have a question or two. My webpage looks like this http://i.gyazo.com/84d7d1f871fbe6a917ee505d922df670.png
And I want the gallery to show up in the box under the slideshow. The big rectangle there. But its showing up like this as of now:
http://i.gyazo.com/dd30de7b1af43b4686cfb9e032404404.png
How would I align it to where I want it? I was thinking about making boxes in photoshop and slicing them and adding an id then assigning an id to the gallery thing and aligning it. But I dont really know how to go about that and it’d be a mess. If you can help it would be appreciated. Thank you :)
Hello Cody,
Not sure how you have the code for the other elements. Can you give me a link where I can check it?
Hi,
Thanks for the tutorial. I’ve created my first photo gallery following your instructions.
Now, I would like to create next/back arrows over the bigimage.
RH
Hello Ronnie,
As a quick solution you will need to put a Javascript function to next and previous image buttons. The next tutorial will be with this type of gallery. So make sure to check the site next week.
Hi,
Can I please have the link to this tutorial you mentioned. I would really like to add a previous and next button to this gallery. Thank you!!
Hello Andrei,
That tutorial is not ready yet, sorry! I can take a look to your problem right now and help you via e-mail or Skype if you want.
Is the tutorial for prev/next button ready? If so could I have the link! I also would like to add prev/next button to my galleries.
Thanks!
Hello Riley,
I am working on it. Sunday night will be out for sure. It has a lot of features, such as automatic slideshow, next and previous buttons, thumbnails and bullets that indicates current position in slide. I will provide here the link when is ready.
Hello Riley,
Here is the new tutorial http://html-tuts.com/jquery-image-slider/. This one has navigations arrows, bullets and even automatic slideshow.
Hello Andrei,
The new tutorial is out now here http://html-tuts.com/jquery-image-slider/. It has navigations arrows, bullets and even automatic slideshow. Check it out.
Great tutorial! I do have 1 question though, i would like to have only 2 or 3 of the clickable images but when i do that it won’t center (it will only show the 2 or 3 on the left), any idea how to fix this?
Hello Bram,
Just add an <a> tag around the big image. It should work. Double check your CSS files, maybe you have an align property set to left.
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.
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.
do you have code for comments box that the comments can be post to your website ? i am new to this, need help ..
Yes. Just place your code in comment like this:
<code>Your Code</code>how i can put a title in the gallery and also caption for the image ?
Above the gallery code you can insert a text that can be your gallery title.
About captions you can put a text below every image.
I’ve added a further 4 images to the gallery. When it first loads all of the big images are lined up end on end below until I click the the first thumbnail. Any reason why they are likely to be visable?
You have the same problem as the other user. Check the CSS and add to your every div id=”normal5″ and so on “normal6 7 8” etc, set “display: none;” in CSS.
That’s curious because this is how its coded:
}
#normal2, #normal3, #normal4, #normal5, #normal6, #normal7, #normal8, #normal9, #normal10, {
display: none;
}
any changes to that?
At the end of #normal10 you have a comma “,” before the bracket “{” and that is causing an error to your css.
Your a champion. Great easy to understand tutorial. One comment for beginners you should include: You need to create 2 sets of images, one named image1.png and another named bigimage1.png. I somehow thought the javascript would enlarge the images and couldn’t understand why they weren’t appearing. Then I noticed the src reference to them in the html.
-Cheers
I have the problem when i put this on my site, when i first load the page all the bigimages are there below the thumbs. then when i click a thumb it’s just the bigimage i’ve clicked that’s shown.
How can i fix this?
thx in advance
Hello. Maybe you’ve forgot to add the JavaScript or CSS. Check the
tag if you included your files there.thx for a fast reply. Everything is there, the css, the js. i first put the js in the js file that was already present, and then tried a different file, added a tag for the file, and didn’t work either.
Can you send us your files in a .zip to check it or if you have a link where we can view your work? You can find our support email in contact page.
You forgot to add “display:none;” for all those divs, inside CSS:
#normal2, #normal3, #normal4, #normal5 {display: none;
}
thx for the fast reply again ;)
I checked my css file, but the line was there. I tried doing it inline (sorry!) and that worked for some reason.
thx for the help
If our help was working for you, consider to make a small donation to improve our service for you and all other users, here: http://www.html-tuts.com/donate
Thank you.
And what if I want the thumbnails to be on right side? but vertical.
Thanks
Also, is it possible to design it so it scrolling down but not affecting the bigimage? The big image still stays at same place when scrolling down.
If not, is it possible to make it click on thumb and it goes to the top to show the big image. because I have 14 images but want to display them in vertical.
Thanks
In order to have the thumbnails in the right, you should change the code order. First you will have the big image <div> and after the thumbnails <div> with “float: left;” and also don’t forget to set the correct width!
Nice. One question though, the thumbnail images currently run above the center pic. What needs to be altered for the thumbnails to be shown below the main pic. I’m new to this. Thanks.
Just put the <div> thumbnails HTML part, below the big image html.
Absolute legend. Something as simple as that was driving me nuts. Thank you!
That’s cool, thanks! But what can I do if I have more pictures, about 70?? Then it’s a pain to scroll down every time to see it. Can I add “next” and “prev” button or make the picture to open on the center of the screen?? Please help.
Yes you can do it, but for this you will need an advanced code of JavaScript.
good tutorial
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.