Creating a Lightbox for your images

Ady — Wed, 19 Apr 2006 02:30:21 +0000

How to use the LightBox version 2.

This tutorial aims to take you step by step through how to use the lightbox JavaScript system that was written by Lokesh Dhakar. The Lightbox is a way to present images onto the screen in a way similar to how they

are presented to a photographer who is using a light box to view negatives.

First you need to obtain the LightBox v2 system from the official

download site. This was version 2.02 when these notes were made.

Uncompress the files into a folder called LightBox2, so you can copy the required files.

In your web site create a folder called css, another called js and an images folder. In this sample site the folders are shown here:

In these folders you need to copy the following files:

Into the js folder:

prototype.js
lightbox.js
effects.js
scriptaculous.js

into the css folder:

lightbox.css

into the images folder:

loading.gif
prevlabel.gif
blank.gif
next.gif
closelabel.gif
close.gif
nextlabel.gif
prev.gif

Now we can edit our page that has the picture(s) we wish to link to the lightbox.

The first stage is to make sure your images have two versions, a full

size and a thumbnail. I generally make the thumbnails in the range 64×64

pixels up to 128×128 pixels depending on the situation. If i had a picture

called photo001.jpg then the thumbnail woudl be something like picture001-thm.jpg.

Create a final folder called photos and put your photos, pictures and thumbnails

into this. This fourth folder is for any images you want to display that are not part of the general styling of the site.

Now we can insert the required javascript and css links into the document:

All these items go into the … area in the code.

The first bit you are familiar with (using CSS links), and that is:

This links to the css for the lightbox. It makes it only used on the screen.

Next we insert the javascript links. The system uses four files. The LightBox

file which contains the lightbox specific details, plus the files for

the effects (effects.js). The last two (lightbox.js and

scriptaculous.js) are specific “building blocks”

that provide a lot of extra functions that are beyond the scope of the

tutorial. They are required to get lightbox running.

these require links in the head area as did the css. The links look like

the following:

Now the order is important.

Now we are ready.

The head section will look similar to this:

Any other CSS and JavaScript can be placed after line 8 in the sample

shown.

Now we can turn our attention to the actual images.

In the main body of your page, if you wish to use a lightbox effect on

any image then you do the following steps.

Insert the image as normal.

Insert the image’s thumbnail immidiately to the right of the image. For

example the code below shown the flow2a and flow2a-thm files inserted

intot he code:

Flow" width="639" height="510" /> src="photos/flow2a-thm.jpg" alt="The flow thumbnail" width="100" height="100" />

Now we modify the code to create our lightbox link:

We start by changing the first img src into an a href, removing the width

and height sections, plus the / before the >

Flow”>

Now change the alt to title and if you wish extend the title of the image:

We now add the rel=”lightbox” attribute to the a href. This

is magic dust that makes the lightbox code work with the image.

Now

add a after the thumbnail:

src="photos/flow2a-thm.jpg" alt="The flow thumbnail" width="100" height="100" />

And there we have it. One photo lightbox.

If you do multiple images then you only need to repeat the steps for the

images.

Technorati Tags: lightbox, tutorial

Books and Resources

Mon, 30 Jan 2006 17:01:37 +0000

When studying this course most of the lecturers will not specify a text book for youi to use. As a result we will list books that may be useful.

The following is a starter list, but will be extended. If you find a resource that is suitable, add the detaisl to the comments.

Designing Web usability: Jakob Nielsen [New Riders, 2000]
Elements of Web Design, 2nd Ed: Darcy DiNuccie [Peachpit, 1998]
Macromedia Dreamweaver MX, training from the source: [Macromedia Press, 2003]
Usability: The site speaks for itself: Braun, Gadney, Haughley, Roselli, Synstelien, Walter, Wertheimer [glasshaus, 2002]
Macromedia Dreamweaver MX, complete concepts and techniques: Shelly, Cashman & Wells [Thomson Course Technology, 2004]

Cert IV in IT (Web Design) » Scripting

Creating a Lightbox for your images

How to use the LightBox version 2.

Further Links – CSS and more

Books and Resources