Introduction

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

Demo Gallery

Courtney House
Courtney House Educational Excellence in a Global Context
Educational Excellence in a Global Context Reception Phase
Reception Phase Junior Phase
Junior Phase Intermediate Phase
Intermediate Phase
Senior Phase
Senior Phase Cambridge Phase
Cambridge Phase Cambridge IGCSE
Cambridge IGCSE Cambridge A-Level
Cambridge A-Level Maximum Class Number of 16
Maximum Class Number of 16
Individual Reading Programme
Individual Reading Programme Aftercare Programme
Aftercare Programme Ball Skills
Ball Skills Afrikaans Second Language
Afrikaans Second Language Foreign Language French
Foreign Language French
Foreign Language Spanish
Foreign Language Spanish Secure Environment
Secure Environment Self-Esteem
Self-Esteem Team Work
Team Work Social Interaction
Social Interaction
Personal Skills
Personal Skills Individual Targets
Individual Targets Social Awareness
Social Awareness Communication Skills
Communication Skills Emotional Intelligence
Emotional Intelligence

These photographs were originally used in a promotional slideshow I created for Courtney House International School.

This tutorial is divided into three parts.

Part 1 - Styling the Gallery Using CSS

Part 1 describes how CSS is used to style the gallery.

Part 2 - Coding the html

Part 2 provides step by step instructions of how to code the html for the gallery.

Part 3 - Using the Lightbox Script

Part 3 explains how to setup, activate and modify the Lightbox script.