Lightbox - My Images

view movie Click icon to view demonstration

Now I would like to show you how to organize your images and files to create your own "lightbox". First I created a folder named "css-web-gallery". Within the folder are 2 items "a folder named "lbox" and then a file named "lightbox.html". I recommend you name the sub folder "lbox" since the code is written with that path in mind.

Within the "lbox" folder I have the 7 images I used for random images, and the slideshow examples. I have renamed these images "yard1a.jpg", "yard2a.jpg", etc. I renamed them with a more specific name (yard instead of photo) because I may want to have several categories of images and need descriptive names to help me keep the files organized. I have also added the "a" to the name to identify these images as thumbnails.

I return to the HTML code and access the first list which was originally "Portraits". I change the Word which appears on the screen and the internal link to yard

original code

<li><a class="set" href="#Portraits">Portraits

new code

<li><a class="set" href="#Yard">Yard

The next code is a little tricky, the CSS code is causing the browser to display the image at a smaller size when the page first loads, then when I hover over the image the thumbnail appears at full size with a white border around it. When I click on this thumbnails, the large version of the image displays all by itself on a page. At this point I don't have any larger versions of the image in my "lbox" folder.

All of the code that refers to "portrait" images will need to be closed, and I would like to do this quickly and automatically. I highlight the code "lbox/portrait" and I plan to have BBEdit change every instance of that text to "lbox/yard". Make sure you do not highlight a number - just the word portrait. Once my find dialog box is up, then I tell it to replace all instances of "lbox/portrait" with "lbox/yard".

BBEdit tells me it replaced that term 32 times, since I have 16 thumbnails and 16 links that is the correct number. I replace the code which referred to a Web image with the local image.

original code

<img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" />

new code

<img src="lbox/yard1a.jpg" alt="" title="" />

The new code will display my 7 thumbnail images, but it will not work when I click on the thumbnail and try and load a large version of the image.

Revised lightbox page??

As I load the revised page I first see the original landscape image, but when I click on the "Yard" tab I see my 7 thumbnail images. When I hover the thumbnail enlarges, but when I click I receive an error message. I return to my Desktop where I have added 7 more images to the lbox, "yard1.jpg"......"yard7.jpg". These are the original images that came from my digital camera.

This creates 7 image pair, 1 and 1a, 2 and 2a, etc. The ia image is displayed at 2 sizes, the smaller size which displays when the page first loads, and then a larger version when I hover.

Now when i test the page an image loads when I click on a thumbnail. When I tested this in Firefox for Mac the browser resized the huge digital image, I am not sure all browsers do this. In some browsers you may only see the upper left corner of the image. If I wanted to create a real gallery I would resize the original images to a width of about 800 pixels so the image did not need to be scaled to fit on the screen.

next I return to the code so that the "Yard" tab is the active tab when the page loads. I access the list item that holds the "Landscape" inner list, and remove the class="active" code. I paste this attribute into the li tag that holds the "Yard" inner list.

The original lightbox page allows me to have 5 categories of images, which is great if you have lots of photos. However, if you only want to display one section of photos you will need to remove the extra tabs and lists. I look closely at the code and discover that each tab consists of an inner list, but also has a list item from the outer list. I begin by highlighting the code for the "Landscape" tab and carefully delete it. After removing that code, I test the page to make sure i haven't taken out too much and then move on to the next list item and nested list.

After removing the other tabs, I am left with a gallery that only displays yard photos.

Lightbox with my yard images