First time visitor? The tutorials start here.

CSS Photo Gallery

There are many ways to make a photo gallery. Some use javascript to pop up a larger image in the same or a different window. Some load a new page for every enlarged image. You could easily use an iframe, but since those are bad for accessibility, I stay away from iframes as much as possible. Ajax is good for photo galleries as you can see here, but I’ll save ajax for another day as it’s more advanced and requires javascript.

Today, I’ll show you how to create a photo gallery with nothing but pure xHTML and CSS.

Below is a screen shot from this page. When you hover on a thumbnail, an enlarged version of the image appears.

Screen Shot of Photo Gallery

Actual Image Dimensions

For this exercise, you should use images that are 250px wide by 188px tall. After you learn the technique, feel free to play around with something other than that.

The xHTML

The xHTML for this is simple:

May 17, 2009 Note: I modified the xHTML a little, because IE6 will not enlarge images when they’re hovered on. Please see this comment below for an easy workaround.

<div id="gallery">
<a href="#"><img src="frozen_lake.jpg" alt="Frozen Lake" title="Frozen Lake" /></a>
<a href="#"><img src="sunrise.jpg" alt="Sunrise" title="Sunrise" /></a>
<a href="#"><img src="fountain.jpg" alt="Fountain" title="Fountain" /></a>
<a href="#"><img src="peacock.jpg" alt="Peacock" title="Peacock" /></a>
<a href="#"><img src="boat.jpg" alt="Boat" title="Boat" /></a>
<a href="#"><img src="sunset.jpg" alt="Sunset" title="Sunset" /></a>
<a href="#"><img src="neon_grill.jpg" alt="Neon Grill" title="Neon Grill" /></a>
<a href="#"><img src="old_print_shop.jpg" alt="Old Print Shop" title="Old Print Shop" /></a>
<br style="clear:both;" />
</div>

Here, we have nothing but images nested inside anchor links, and all of that is surrounded by one <div> that I gave the id of “gallery.” You can name it anything you want, but the CSS has to agree with it.

The only reason we use links here at all is because some browsers require them in order to get the hover effect. If every browser was standards-compliant, we could do away with the links completely. But unfortunately, the most widely used browser out there is still far from standards-compliant.

Before closing the #gallery div, I added a <br /> with the inline CSS of clear:both; because we’ll be floating the images. Without clearing those floats, the containing #gallery div wouldn’t extend past the last row of images, or any of the images for that matter.

Now for the CSS. This could be done by absolutely positioning each image, but it would take a lot more time and energy to position each one, then reposition each one every time you want to add, remove, or rearrange them. But when floating each one, you can easily add, remove, or rearrange images simply by adding or removing one line of code, or replacing an image url and its corresponding alt and title attributes.

Removing Image Borders

Since each image will be a link, they will have borders unless you remove them. This can easily be done with one line in your CSS:

img { border: 0; }

Or, you may decide to leave the borders in. I generally remove image borders from all my pages whether they have a photo gallery or not, so the CSS attributes I define here will assume the images start off with no borders.

If you want to give your gallery a fixed width like I did, you’ll first need to determine how many columns of images you want, how wide you want your thumbnails to be, how big you want the margins between them to be, how wide you want any borders and/or padding you’ll have on those images, and add all those measurements up to determine the width of your containing <div>. I opted for four columns of 100px wide thumbnails, 10px margins between thumbnails, and 1px borders around the thumbnails on this page, so a 480px wide gallery container works well.

#gallery { 
	width: 480px;
}

You may also want enough margin above and below your gallery container to clear any other content that is on your page, and to center that container within its available area. Here, I opted for 45px top and bottom margins and centering the container.

#gallery { 
	width: 480px; 
	margin: 45px auto;
}

You may also want to give that containing div to have its own background color.

#gallery { 
	width: 480px; 
	margin: 45px auto; 
	background: #ccc;
}

You may also want to add padding to that containing div so the outer part of the resulting frame isn’t half the width of the margins between images.

#gallery { 
	width: 480px; 
	margin: 45px auto; 
	background: #ccc; 
	padding: 5px;
}

These are just a few suggestions, and how you style it is up to you.

Next, we need to set up the links that surround the thumbnail images…

This post has multiple pages. Go to page: 1 2

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Comments (2)

LesaMay 16th, 2009 at 9:36 pm

Update:

It has been brought to my attention by a friend who has access to IE6, that the images don’t enlarge in IE6 when they’re hovered on. Since IE6 is incompatible with Windows Vista (go figure), I downloaded IETester and did some experimenting with it.

Here is what I found. If you have standalone versions of IE (works only with Windows XP), or a program like IETester (works with XP or Vista, but it crashes occasionally on my laptop), you may be able to see these results for yourself. Otherwise, you can just read my comments on the experimental pages.

Note: If you view it in the standalone that I linked to above, the last page in my experiments will display incorrectly because the page uses an IE conditional statement that the standalone doesn’t recognize. In IE6, the last page actually looks like the page before it, and IETester depicts this behavior accurately.

Another thing I didn’t add to the comments on those pages is that the layout is messed up in IE6. The thumbnails appear in 3 columns instead of 4, and there is extra space on the right. You can see this for yourself without installing anything if you go to Total Validator, paste in this url, and choose IE6 from the dropbox where it says “Screenshot”. The url and screenshot are all you need to fill in/choose, then submit at the bottom, wait for it to process, and scroll down to see the screenshot.

The results in Safari, Opera, Flock, and Google Chrome (all on Windows) were all the same as the results in Firefox. This goes for the page used in this tutorial as well as the experimental pages, and IE6 is the only browser I tested with that doesn’t display the initial code correctly.

LesaMay 17th, 2009 at 6:54 pm

I couldn’t figure out a good IE6-friendly solution that didn’t entail more code than what I was going for, so a quick “fix” is to make each thumbnail clickable. The anchor link tags are already in place, so all you have to do is change the # to the url of the image.

So instead of:

<div id="gallery">
<a href="#"><img src="frozen_lake.jpg" alt="Frozen Lake" title="Frozen Lake" /></a>
<a href="#"><img src="sunrise.jpg" alt="Sunrise" title="Sunrise" /></a>
<a href="#"><img src="fountain.jpg" alt="Fountain" title="Fountain" /></a>
<a href="#"><img src="peacock.jpg" alt="Peacock" title="Peacock" /></a>
<a href="#"><img src="boat.jpg" alt="Boat" title="Boat" /></a>
<a href="#"><img src="sunset.jpg" alt="Sunset" title="Sunset" /></a>
<a href="#"><img src="neon_grill.jpg" alt="Neon Grill" title="Neon Grill" /></a>
<a href="#"><img src="old_print_shop.jpg" alt="Old Print Shop" title="Old Print Shop" /></a>
<br style="clear:both;" />
</div>

You end up with:

<div id="gallery">
<a href="frozen_lake.jpg"><img src="frozen_lake.jpg" alt="Frozen Lake" title="Frozen Lake" /></a>
<a href="sunrise.jpg"><img src="sunrise.jpg" alt="Sunrise" title="Sunrise" /></a>
<a href="fountain.jpg"><img src="fountain.jpg" alt="Fountain" title="Fountain" /></a>
<a href="peacock.jpg"><img src="peacock.jpg" alt="Peacock" title="Peacock" /></a>
<a href="boat.jpg"><img src="boat.jpg" alt="Boat" title="Boat" /></a>
<a href="sunset.jpg"><img src="sunset.jpg" alt="Sunset" title="Sunset" /></a>
<a href="neon_grill.jpg"><img src="neon_grill.jpg" alt="Neon Grill" title="Neon Grill" /></a>
<a href="old_print_shop.jpg"><img src="old_print_shop.jpg" alt="Old Print Shop" title="Old Print Shop" /></a>
<br style="clear:both;" />
</div>

If you’d like, you may also add a conditional statement that will only be seen by people who use IE6 or older versions of IE, such as:

<!--[if lte IE 6]>
<p id="old_ie">You won't see this photo gallery as intended, because you are using an obsolete version of Internet Explorer. Due to its many bugs and security holes, you should <a href="http://www.google.com/#hl=en&q=upgrade+ie&btnG=Google+Search&aq=f&oq=upgrade+ie&fp=1_wXsDL0V4s">upgrade your IE</a>, or switch to a different browser all together. Better browsers than the one you are currently using include, but are not limited to: <a href="http://www.mozilla.com/firefox/">Firefox</a>, <a href="http://www.opera.com/download/">Opera</a>, <a href="http://www.apple.com/safari/">Safari</a>, <a href="http://www.flock.com">Flock</a>, and <a href="http://www.google.com/chrome">Google Chrome</a>.<br /><br />To see enlarged photos in this browser, click on the thumbnails. Then, click the back button in your browser's toolbar to return to this page.</p>
<![endif]-->

You may then style (and even position) that message by targeting #old_ie in your CSS, without it affecting any other browsers.

Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.