CIS 58.53A - Web Graphic Projects

Lightbox - XHTML & CSS driven Web Gallery

Click icon to view demonstration

I wanted to show you a Web Gallery that will validate to XHTML 1.0 standards. I visited a site at CSS Play http://www.cssplay.co.uk/menu/lightbox where I found code for a page that displays a grid of thumbnails which when you hover over the image enlarges the thumbnail, and if you click on an image a larger version of the image appears. I am delighted to present it to you, but it wasn't easy finding it, most web galleries are table based and have dozens or even hundreds of validation errors.

This page displays a 4 by 4 grid of images which is actually a list of images which has CSS code that causes it to display as a 4 image wide grid. There are also several tabs at the top, and when I click on another tab I see a grid of 16 different images. The code for these new images has always been on the page, but a CSS command has hidden the images until I click on the tab. Clicking on the tab makes that list the "active" list and the other lists are hidden.

In the example at CSS Play three are 5 tabs which each display 16 images but you could have more tabs or reduce it so that only one grid displayed.

To begin creating my own lightbox gallery i scroll down to the bottom of the page where I see a gallery.zip file which I download and decompress on my hard drive. This produces a file called lightbox.html. Here is a link to the original code for lightbox.html

I will go into a more detailed description of the code in later lessons, but for now I want to point out some overall concepts. This file conforms to XHTML 1.0 Strict standards. There are embedded CSS styles in the head of the document which control the display of lists, list items, nested lists and the classes of "photos" , "topics" and the pseudo class of "active". The class of active is quite important because when list is active the images in the list display, and when the list is not active the images are hidden.

Now let's look at the HTML that makes up the page. The page construction is actually pretty simple. There is an opening <div> tag that encloses the entire page. This tag has a class of "photo" which was frequently mentioned in the CSS.

Within the <div> tag is an unordered list with a class of "topic" then a list item with a class of "set". Next comes a link for the area of the document named "Portraits" and ten the word "portraits" which appears on the screen in a tab. Finally there is some commented code that creates a table if the user is on IE6 or an earlier version of IE.

<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits</a>

The code that follows is the "meat" of the page. There is a nested list which has 16 list items. After the <li> code there is code that links to a larger version of the image, next the code that displays the thumbnail, then the ending link and ending link item.

Most of these links are relative paths for local images, they refer to a folder called "lbox" and then images called "portrait2.jpg" and then the thumbnails would be "portrait2a.jpg". These images are a pair, which "portrait2" being the large version of the image and "portrait2a" as the thumbnail. The first img tag is an exception because it has a src value for a file on the Web, since they want you to have one image to play with on your sample page.

Let's take a look at the page as it comes to us from the Web site.

Lightbox Sample

The nested list concept is repeated 4 more times for a total of 5 inner nested list. The one feature that is important is that only one of these inner lists has a class of active. In the case of the sample it is the "Landsacpe" list which has the class of active in the list item of the outer list.

<li class="active"><a class="set" href="#Landscapes">Landscapes</a>

<ul>
<li><a href="lbox/landscape1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/landscape1a.jpg" alt="" title="" /></a></li>

The list item for the other lists are simple <li> tags with no class of active. When I click on a tab for a specific subject (such as birds or trees) then that li tag becomes active and the 16 images display.

Because the code is simple lists with images and links the page validates easily. When I validate I see we validate to XHTML 1.0 Strict . I had been worried about the alt tags, but I see they are included, they are just empty alt="" . If you create a real gallery you need to fill this in with a value such as alt="blonde girl".

By using this code we have a gallery that allows us to put in a large number of pictures, to expand the view of those image by simply hovering, and then to see an even larger version of the image by clicking. This is a slick piece of code.

CIS 58.53A - Web Graphics Projects

Lightbox - XHTML & CSS driven Web Gallery