Create Valid HTML Photo Gallery for All Browsers

Posted on January 23, 2012 by Dan Doicaru in HTML/CSS Category with Medium Difficulty

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.

Create a HTML Photo Gallery Valid for All Browsers

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.

Live Demo

Download Files

Related Articles
Comments
  1. Dom says:

    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.

  2. William says:

    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

  3. Bella says:

    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:

    height: 100px;
    overflow-y: scroll;

    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.

      • Bella says:

        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.

          • Bella says:

            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.

  4. Gabe says:

    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.

      • Gabe says:

        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

        <div id="gallery">
        		<div id="thumbN">
        			<a href="javascript: changeImg(1);"><img src="images/image1.jpg" alt=""/></a>
        			<a href="javascript: changeImg(2);"><img src="images/image2.jpg" alt=""/></a>
        			<a href="javascript: changeImg(3);"><img src="images/image3.jpg" alt=""/></a>
        			<a href="javascript: changeImg(4);"><img src="images/image4.jpg" alt=""/></a>
        			<a href="javascript: changeImg(5);"><img src="images/image5.jpg" alt=""/></a>
        		</div>
        		
        		<div id="bigImages">
        			<div id="normal1">
        				<img src="images/image1b.jpg" alt=""/>
        			</div>
        			<div id="normal2">
        				<img src="images/image1b.jpg" alt=""/>
        			</div>
        			<div id="normal3">
        				<img src="images/image1.jpg" alt=""/>
        			</div>
        			<div id="normal4">
        				<img src="images/image1.jpg" alt=""/>
        			</div>
        			<div id="normal5">
        				<img src="images/image1.jpg" alt=""/>
        			</div>
        		</div>
        	</div>

        Javascript is being linked in the footer

      • Gabe says:

        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

    • Bella says:

      Your Javascript might not be linked properly? I had the same problem and it ended up being the link to the Javascript.

  5. Yli says:

    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.

  6. Jessi says:

    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.

  7. James says:

    None of the examples have captions. How can I add popup captions to each of the bigimages/preview?

  8. alex says:

    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:

      Container Scroll Bar in Photo Gallery

      • Alex says:

        thank you so much, i have done that, but how do i insert the scroller, or the navigation buttons?

      • Sarah says:

        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.

  9. Re says:

    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

  10. CodyMoores says:

    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 :)

  11. RonnieHayward says:

    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

  12. Bram says:

    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?

  13. Andrew says:

    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.

  14. JonnySpry says:

    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.

      • JonnySpry says:

        Ah I see, thank you! I had the wrong logic thinking about it.

        Works perfectly, thank you very much :)

        Very good site, this.

  15. alcione says:

    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

  16. Dandy says:

    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.

  17. Isabel says:

    Maybe an email where I can send it? Sorry not uploaded yet… =/

  18. Isabel says:

    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 ?

  19. alex says:

    I am having the same problem as Keshan. When I click a thumbnail, the big image does not change.

  20. keshan says:

    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.

  21. regina silvestre says:

    do you have code for comments box that the comments can be post to your website ? i am new to this, need help ..

  22. regina silvestre says:

    how i can put a title in the gallery and also caption for the image ?

  23. ARC says:

    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.

      • ARC says:

        That’s curious because this is how its coded:

        }
        #normal2, #normal3, #normal4, #normal5, #normal6, #normal7, #normal8, #normal9, #normal10, {
        display: none;
        }

        any changes to that?

  24. ARC says:

    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

  25. Macintauren says:

    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.

      • Macintauren says:

        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.

  26. NoRfauji says:

    And what if I want the thumbnails to be on right side? but vertical.

    Thanks

    • NoRfauji says:

      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!

  27. JP says:

    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.

  28. Marta says:

    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.

  29. Amit says:

    good tutorial

  30. Godwin says:

    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.

Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


+ 6 = 13

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.