How to build a Photo Gallery

Get Started
1

I am building a website for my daughter who is a fledgling makeup artist. The last page I have left to do is a photo gallery. She has about a dozen or so photos of models for whom she did the makeup for the photo shoot. I need to show them as thumb nails, and show the full size photo when a user clicks on a thumb nail.

When I sat down to design the page, I realized it is going to be much more difficult than I first anticipated.

Can I pull this off using HTML 4.0 and CSS alone ? or will I need to draw on a different technology such as PHP, flash, etc.

Some mentoring on how to pull this off would be great!

2

yep, no problem. but the actual process depends on whether you want to use javascript in terms of wanting to support the most likely tiny number of javascript disabled browsers visiting your website.

if you want to do it without js you can use this demo displaying just 1 thumbnail and its enlargement to help you get started.

if you use js you can automate the generation of the elements to display the images. without javascript you will have to edit the html every time you want to add/delete an image.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
 
.thumb_container {
position: relative;
}
 
.imgEnlarge {
width: 500px;
}
 
.imgThumbs {
width: 150px;
}
 
.enlarge_container {
display: none;
}
 
.thumb_container {
position: relative;
}
 
.thumb_container:hover .enlarge_container {
display: block;
position: absolute;
left: 200px;
top: 0px
}
 
</style>
</head>
<body>
 
<div id="images_container">
    <div class="thumb_container">
         <img class="imgThumbs" src="pic1.jpg" alt="" />
         <div class="enlarge_container">
                <img class="imgEnlarge" src="pic1.jpg" alt="" />
          </div
    </div>
</div>
 
</body>
</html>
3

that can all be done fairly easily using just html and css if you are happy to have the enlargement displayed when the thimbnail is hovered on and not clicked on.

if you definitely want a click to display the enlargement then you will need to use javascript if you don’t want a page refresh to display the enlargement.

how you code this up depends mainly on whether you want to support what most likely would be a tiny number of javascript disabled browsers to your website and whether you want a hover or click to display the enlargement.

with a relatively low number of images you probably won’t need a database or server side code.

4

This is pretty straightforward stuff, and you can do it with plain ol’ HTML and CSS. You can see an example of one I’ve done at http://gybo.org.uk/photos/20100717-howgills.shtml
You can make it look better by coding an actual page for each image, so that it has the look and feel of the website rather than just being an image loaded in the browser window, but again that is very straightforward.
Of course, if you want a fancy-pants lightbox effect then that’s a whole lot more work, and you will need to look at more sophisticated scripting, as well as finding some way to placate the people who get frustrated by an unnecessarily complicated website…

5

I can live with having the thumb nails enlarge when the mouse hovers over them. But I have little or no idea how to code it. Can you outline the procedure for me?

Thanks

6

Just a note: Internet Explorer 6 (an lower probably) don’t support :hover on anything else than <a> tags. There is a simple fix though: Whatever:hover.

7

I have made some progress thanks to everyones help, but I have a question. can you write a website in HTML 4.0 and have it contain one or two pages that are written in XHTML as long as those one or two pages have the proper XHTML DOCTYPE!