CHouseLive

Creating Simple CSS Photograph Galleries

Introduction

This tutorial demonstrates how a photograph gallery, as seen below, is created using CSS, HTML and the Lightbox script.

Part 1: Styling the Gallery Using CSS

Creating the Gallery Canvas

When creating a photograph gallery the first thing you will need is a "canvas" on which to place the thumbnails. This may be the whole page, or as in the case of the demo gallery, simply a div within a page.

Gallery

.gallery {
  padding: 0px 5px;
  width: 600px;
  background-color: #000;
  margin: 0px auto 0px auto;
}

.gallery-top {
  background-position: top;
  width: 610px;
  margin: 15px auto 0px auto;
  background-image: url('images/black-rounded.png');
  height: 10px;
}

.gallery-bottom {
  background-position: bottom;
  width: 610px;
  margin: 0px auto 0px auto;
  background-image: url('images/black-rounded.png');
  height: 10px;
}

To create the demo gallery's canvas three class divs have been used.

The gallery class is the main section of the canvas, and will automatically expand as images are added.

The width is set to 600 pixels and a left and right padding of 5 pixels each have been included, resulting in a total width of 610 pixels. To centre this div I have set the left and right margins to auto.

The result is as follows:

To create the rounded borders, a small image has been used.

The gallery-top class and gallery-bottom class are then used to create the illusion of rounded borders.

Headings and text

Now that we have set up the canvas, we must style the text.

A useful feature of CSS is the ability to style different types of text and for these style types to be specific to a div class or id.

Before styling specifically for the gallery class the text on this page looks as follows:

To style text for a specific class, it is simply a case of specifying the class and then the text type, as can be seen in code snippet below.

Headings

.gallery h4 {
  padding: 0px;
  margin: 0px 10px 5px 10px;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  font-weight: normal;
}

Sometime it is necessary to include code that will over-ride previously set styles. If you look at the original styling for heading 4, you can see that it has a bold attribute. By specifying font-weight: normal; the bold attribute is over-ridden.

Paragraph text

.gallery p {
  padding: 0px;
  margin: 0px 10px 0px 10px;
  color: #FFFFFF;
  font-size: 1em;
  text-align: center;
}

Using an em unit of measurement for the font sizes allows the font sizes to be scaled within the browser. This is a good practise in terms of ensuring greater accessibility, especially for people with sight disabilities who may chose to increase the font size.

Thumbnail text

.gallery a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: .8em;
  text-align: center;
}

The text which appears below each thumbnail is actually a link. Thus we need to style the a attribute. By default, all links are underlined. To remove this underlining we must specify text-decoration: none;

For all text types, I have set the font colour to white so that it will be easy to read on the black canvas. color: #FFFFFF;

The result of the styling can be seen below:

Laying out the thumbnails

The last step involves styling the links and images so that the gallery is aesthetically pleasing.

Before styling the links and and images the gallery looks as follows:

As you can see things are a little messed up.

The first step is to style the images.

Images

.gallery img {
border: none;
margin-bottom: 2px;
}

Remove any default borders and add a small margin between the bottom of the thumbnail and the top of the text.

By default the images stack vertically. By stying the links we can change this so that the thumbnails stack horizontally.

Stacking images horizontally

.gallery a {
  float: left;
}

By adding float:left; we force each thumbnail to stack horizontally.

Things are looking much better but now we need to space the images evenly and using the hover attribute, force the background of each thumbnail to change colour when the mouse moves over them.

Hover

.gallery a {
  width: 100px;
  display: block;
  padding: 5px;
  margin: 5px;
}

.gallery a:hover {
  color: #000;
  background-color: #FFFFFF;
}

By including a width equal to the width of the thumbnails (in the case of the demo gallery each thumbnail is 100px ) we have forced the thumbnail text to wrap below each thumbnail.

A margin forces a gap between each thumbnail.

If you hover your mouse over a thumbnail, in the demo gallery bellow, you will notice that the entire area behind the thumbnail and thumbnail text changes to white while the text is displayed black. This is achieved by using padding, display:block; and specifying the background-color and font color in the a:hover element.

Things are almost prefect, except you will notice that the thumbnails do not always start stacking from the left hand side but instead next to the thumbnail with the most text. This occurs because we have used the float:left attribute. This is easily corrected by creating a clear class which then stops the floating and forces a completely new line of thumbnials.

Clear

.clear {
  clear: both;
}

And the result can be seen below.

The Big Picture

The final css will look as follows:

CSS

.gallery {
  padding: 0px 5px;
  width: 600px;
  background-color: #000;
  margin: 0px auto 0px auto;
}

.gallery-top {
  background-position: top;
  width: 610px;
  margin: 15px auto 0px auto;
  background-image: url('images/black-rounded.png');
  height: 10px;
}

.gallery-bottom {
  background-position: bottom;
  width: 610px;
  margin: 0px auto 0px auto;
  background-image: url('images/black-rounded.png');
  height: 10px;
}

.gallery h4 {
  padding: 0px;
  margin: 0px 10px 5px 10px;
  color: #FFFFFF;
  font-size: 1.5em;
  text-align: center;
  font-weight: normal;
}

.gallery p {
  padding: 0px;
  margin: 0px 10px 0px 10px;
  color: #FFFFFF;
  font-size: 1em;
  text-align: center;
}

.gallery img {
  border: none;
  margin-bottom: 2px;
}

.gallery a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: .8em;
  width: 100px;
  display: block;
  padding: 5px;
  margin: 5px;
  text-align: center;
  float: left;
}

.gallery a:hover {
  color: #000;
  background-color: #FFFFFF;
}

Now that we have set our styles for the gallery we can look at how to code the html.

Part 2: Coding the html

The gallery canvas

The first thing we need to code, is the canvas.

This gallery is made up of three parts. The gallery-top and gallery-bottom classes hold the images for the rounded borders while the body section of the gallery is held within the gallery class.

Gallery canvas

<div class="gallery-top"></div>
<div class="gallery"></div>
<div class="gallery-bottom"></div>

Heading and paragraph text

The second step is to add a heading and descriptive paragraph, should they be desired.

Headings and paragraph text

<div class="gallery-top"></div>
<div class="gallery">
  <h4>Demo Gallery</h4>
  <p>These photographs were originally used in a promotional slideshow I created for Courtney House International School.</p>
</div>
<div class="gallery-bottom"></div>

Thumbnails and slides

Next we add the actual thumbnails and links to the larger slides.

Images

<div class="gallery-top"></div>
<div class="gallery">
  <h4>Demo Gallery</h4>
  <a href="gallery1/slides/01.jpg" ><img alt="Courtney House" src="gallery1/thumbnails/01.jpg" width="100" height="74" /><br />Courtney House</a>
  <p>These photographs were originally used in a promotional slideshow I created for Courtney House International School.</p>
</div>
<div class="gallery-bottom"></div>

It is important that a break <br /> is placed before the thumbnail text as this will force the text below the thumbnail in Internet Explorer. Other browsers will do this automatically.

The result of our coding can be seen below:

Clearing floats

As you can see the gallery is not yet perfect. Larger thumbnail captions are causing the different elements to stack incorrectly. This is easily solved by adding an empty div with a clear:both attribute after each row.

Clearing the floats

<div class="gallery-top"></div>
<div class="gallery">
  <h4>Demo Gallery</h4>
  <a href="gallery1/slides/01.jpg" <img alt="Courtney House" src="gallery1/thumbnails/01.jpg" width="100" height="74" /><br />Courtney House</a>
  <a href="gallery1/slides/02.jpg" <img alt="Educational Excellence in a Global Context" src="gallery1/thumbnails/02.jpg" width="100" height="74" /><br />Educational Excellence in a Global Context</a>
  <a href="gallery1/slides/03.jpg" <img alt="Reception Phase" src="gallery1/thumbnails/03.jpg" width="100" height="74" /><br />Reception Phase</a>
  <a href="gallery1/slides/04.jpg" <img alt="Junior Phase" src="gallery1/thumbnails/04.jpg" width="100" height="74" /><br />Junior Phase</a>
  <a href="gallery1/slides/05.jpg" <img alt="Intermediate Phase" src="gallery1/thumbnails/05.jpg" width="100" height="74" /><br />Intermediate Phase</a>
  <div class="clear"></div>
  <a href="gallery1/slides/06.jpg" <img alt="Senior Phase" src="gallery1/thumbnails/06.jpg" width="100" height="74" /><br />Senior Phase</a>
  <a href="gallery1/slides/07.jpg" <img alt="Cambridge Phase" src="gallery1/thumbnails/07.jpg" width="100" height="74" /><br />Cambridge Phase</a>
  <a href="gallery1/slides/08.jpg" <img alt="Cambridge IGCSE" src="gallery1/thumbnails/08.jpg" width="100" height="74" /><br />Cambridge IGCSE</a>
  <a href="gallery1/slides/09.jpg" <img alt="Cambridge A-Level" src="gallery1/thumbnails/09.jpg" width="100" height="74" /><br />Cambridge A-Level</a>
  <a href="gallery1/slides/10.jpg" <img alt="Maximum Class Number of 16" src="gallery1/thumbnails/10.jpg" width="100" height="74" /><br />Maximum Class Number of 16</a>
  <div class="clear"></div>
  <p>These photographs were originally used in a promotional slideshow I created for Courtney House International School.</p>
</div>
<div class="gallery-bottom"></div>

This gallery has been spaced so that 5 thumbnail can fit within each row, thus I have placed the clearing div after each 5th picture. The result can be seen below.

Now that we have an exceptional looking gallery the last thing we need is a fancy way of displaying the slides. In the final part of the tutorial I will explain how to use Lokesh Dhakar's Lightbox script to overlay the photograph slides on the gallery page.

Part 3: Using the Lightbox Script

Downloading Lightbox

Before we can proceed, you will need a copy of the script. The Lightbox2 script can be downloaded from here.

Once you have downloaded the files you will need to unzip them and copy the files into the folder where your gallery pages is stored.

Setting up Lightbox

In order to use the Lightbox script, you will need to attach four files to the head section of your gallery page.

Lightbox Setup

<head>
<title>Demo Gallery</title>
<link rel="stylesheet" type="text/css" href="css/lightbox.css" media="screen" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>

Activating Lightbox

Three attributes are added to the slide link which will activate the Lightbox when the thumbnail is clicked.

1. rel="lightbox" initiates the script
2. title="my caption" adds a caption for the slide
3. rel="lightbox"[group1] a group name between square brackets in the rel attribute allows easy navigation between related slides.

Example Code

<a href="slides/01.jpg" rel="lightbox[courtney]"><img alt="Courtney House" src="thumbnails/01.jpg" width="100" height="74" /><br />Courtney House</a>
<a href="slides/02.jpg" rel="lightbox[courtney]"><img alt="Educational Excellence" src="thumbnails/02.jpg" width="100" height="74" /><br />Educational Excellence</a>
<a href="slides/03.jpg" rel="lightbox[courtney]"><img alt="Reception Phase" src="thumbnails/03.jpg" width="100" height="74" /><br />Reception Phase</a>

The Result

Website Development Resources

• CSS3 techniques
• Lightbox photograph gallery
• Buttons
• Equal Column Heights
• Simple link list

CSS Templates

• Simple CSS
• Journal
• Tree Frog
• Journey
• Blue
• Simply Black

Website Authoring Tutorials

• Styling and placement of images within a web page
• Creating a styled link list using CSS and HTML
• Building a single column webpage from scratch
• CSS mouse-overs
• CSS photograph gallery
• Styling Fonts

Recent Articles

• Add a Dock to Windows 7
• Extend your desktop
• The Power Of Unordered Lists
• Creating a styled link list using CSS and a definition list
• Finding the right webpage authoring editor
• Styling the comments section of your blogger post