Webforumz Newsletter - September 2007
Tutorials
CSS Image Gallery with Lightbox 2.0
After you have created a layout using CSS and HTML the next step is to add some real content. As connection speeds increase, users demand a richer visual experience no matter what the subject is. A great way of providing this media fix is with large high resolution images but to make those images easy to navigate, you will need an effective image gallery with a means of displaying the larger image. In this tutorial I will show you how to create an accessible and easy to navigate image gallery using HTML and CSS, we will then use the popular Lightbox 2.0 to display the larger version of each image when it is clicked.
This tutorial will take 30 minutes to an hour to compete and requires a simple text-editor and access to the internet (to download the Lightbox files).
First of all we will set out the basic HTML, I am using XHTML 1.0 Strict but you may use any strict version of HTML. Open a file using your preferred text editor and save the file as 'gallery.html', now go back to that empty document and will add some code. Before we have added any content the basic document will look like below:
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html";
charset="iso-8859-1" />
<title>CSS Image Gallery</title>
</head>
<body>
</body>
</html>After you have inputted this code into the document, save the changes and we will add in some content. In reality your images gallery may be generated dynamically but the same concepts still apply, you simply need to make sure that each image is outputted correctly or your CSS styles will not apply. As the gallery is essentially a list of images in no particular order we will use and unordered list with each thumbnail image marked up as a list item, this list will have an ID of 'gallery'. We will put all of our content into a 'wrapper' div to give us more control over the layout of the whole page, we will make use of this div later. Your HTML should look similar to this:
<body>
<h1>Image Gallery</h1>
<ul id="gallery">
<li><a href="galleryimages/large/001.jpg" title="A Giraffe">
<img src="galleryimages/small_thumb/001.jpg" alt="a giraffe" /></a>
</li>
...
</ul>
</body>You may add in as many thumbnails as you want here, the example I am creating actually uses twelve images but you can use as many or as few as you like. I have only shown the mark-up for a single thumbnail to save on space. Save the changes you have made to this file. So now we have a basic list of all of our thumbnails. Now we will style this list with CSS and using very little code you will begin to see the beginnings of a simple image gallery. The first step is to create a file in your text editor of choice and save it as 'imagegallery.css', make sure that this file is in the same folder as your 'gallery.html' file. Then go back into the document and we can add some code. The first step is to remove the default bullet points and to get the images to line up alongside each other, we will also reset all margins and padding to 0 using the universal selector ('*'):
*{
margin: 0;
padding: 0;
}
ul#gallery {
list-style:none;
}
ul#gallery li {
float:left;
} Now we need to set a width on our ul so that our thumbnail images don't stretch across the full width of the page, we will also centre the page using margin: 0 auto;, this automatically create equal margins on each side of the element it is applied to, ensuring that it is perfectly centred. We will also add some margins at this point to separate the thumbnails.
*{
margin: 0;
padding: 0;
}
ul#gallery {
list-style:none;
width: 500px;
margin: 0 auto;
}
ul#gallery li {
float:left;
margin: 20px;
}
As you may have noticed if you have tried to preview the gallery, the styles are not applying to the HTML. This is because we have not linked to the stylesheet to our HTML document. Add this code to the head section of the HTML file:
<head>
<meta http-equiv="content-type" content="text/html";
charset="iso-8859-1" />
<link rel="stylesheet" type="text/css" href="basic.css"
media="screen" />
<title>CSS Image Gallery</title>
</head>Save this file and preview the HTML file in your browser. As you can see the whole page is now the same width, so the 'Image Gallery' heading has come in line with the rest of the gallery. All that is left to do is to spice the gallery up a little, you could do whatever you want to at this stage and I encourage you to use your creativity. I am going to stick with something quite simple. My finished CSS looks like this:
* {
margin: 0;
padding: 0;
}
body {
background: #333;
}
div#wrap {
width: 500px;
margin: 40px auto;
}
ul {
list-style:none;
width: 500px;
margin: 0 auto;
}
li {
float: left;
margin: 20px;
}
ul li a img {
border: 5px solid #000;
}
ul li a img:hover {
border: 5px solid #fff;
}
h1 {
color: #fff;
font-family: verdana, helvetica, arial, sans-serif;
font-weight: normal;
margin: 20px;
}I have altered the margin slightly on the ul#gallery but everything else is the same as in the previous steps. The hover state in my example only works in standards compliant browsers but this is of little consequence, the gallery still functions perfectly well. This functionality could be added using JavaScript if you wanted the effect to work in older browsers as well.
Now we have an image gallery that links to the images, all we have left to do is integrate Lightbox . This is quite a simple process and requires a little extra mark-up and the Lightbox files. First of all download and unzip the required files. You can get the latest version from here http://www.huddletogether.com/projects/lightbox2/. Next you need to put the files in the right folder, they should go in the same folder as your html and CSS. The image below shows what your folder should look like after you have placed the Lightbox files into it. This is where a lot of people go wrong, if you choose to put the files somewhere other than here then you will need to change the file paths accordingly.
Next we need to add some extra mark-up to the HTML file. We simply need to add this attribute to all of our img elements rel="lightbox". If you would like to group your images then you would include the group name in square brackets after the attribute value like this rel="lightbox[groupname]", this will allow you to view the next and previous images of that group without closing the Lightbox window. I have marked up my images as below by using the group name 'giraffes':
<li><a href="galleryimages/large/001.jpg" title="A Giraffe"
rel="lightbox[giraffes]">
<img src="galleryimages/small_thumb/001.jpg" alt="a giraffe" />
</a>
</li>Remember to do this to all of the thumbnail images in your gallery. Next we need to link to the Lightbox files in our HTML. We do this just like we did with our CSS file before. This time, however, we are linking to JavaScript files as well. Add this code in the head of your HTML document:
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<link rel="stylesheet"href="basic.css" type="text/css"
media="screen" />
<link rel="stylesheet" href="css/lightbox.css"
type="text/css" media="screen" />
<script type="text/javascript"
src="js/prototype.js"></script>
<script type="text/javascript"
src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript"
src="js/lightbox.js"></script>
<title>CSS Image Gallery</title>
</head>Now if you save your HTML file and preview the gallery you should find that upon clicking, the full size images pops up without taking you from that page, if you have grouped your images then you can click the previous and next buttons (obviously only if there are images before and after that one), which are located on the left and right respectively, to navigate through your gallery. You may also notice that there is a caption underneath the image, this caption is taken from the title attribute of your link so it would be worth your while adding descriptive title text. This also aids accessibility. Your finished gallery should behave similarly to my example one which you can find here http://www.pnda.net/css-image-gallery/, even if you have gone for a different look. You can also modify the Lightbox CSS and images to suit the style of your gallery if you so wish.
You can download a ZIP file of all of the completed files here ZIP File (Download), use and abuse them as much as you like. See the Lightbox website for information regarding their use.