MAT125 HTML Lightbox Demo

Using LightBox to Display Images

Lightbox LS is a fun way to display your photos or artwork. It has a lot of WOW! factor. But is simple to put to use. This program was written by Lokesh Dhakar. You can link to his page to download the code, scripts and directions. Use his directions or follow the directions I have written out. Be sure to get the Lightbox folder before trying this out.

To make sure I used all the necessary javascript - I just copied the code in the head of his example document. The code below in red is what you need to copy too. You can change the name of the title:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <title>Lightbox JS v2.0 | Test Page</title> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> <script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> </head>

I used Divs to set up the body of my document. First I set up their style in my own CSS page. I started by using an ID - which you can see by my using the hash mark before photolinks which is what I named the first ID. I want this div to center - so I set the margin-right and margin-left on auto and the text-align also on center.

#photolinks {margin-right: auto; margin-left: auto; text-align: center; }

I named my CSS page main.css and linked it to the head of my document.

<link rel="stylesheet" href="css/main.css" type="text/css" media="screen" />

Just add it under the original css link (css/lightbox.css) in the head of your html page. Be sure to save it inside the CSS folder.

Setting up the Body of the Page:

Visit my test page and then set up your page to try it on your own.

Here is how I set up my test page:

<div id="photolinks"> The DIV is ID'd as photolinks. I have it styled so it will center on the page.

<h1>Using Lightbox for Photos</h1> I added a headline.

<p>Click on an image. These are in a group. You can go from one to the next.</p> And then some text explaining to the viewer what they needed to do.

<a href="images/sophie1.jpg" title="Sophie the Cat" rel="lightbox[animals]">

<img src="images/sophie1T.jpg" width="100" height="55" alt="My Kitty" />

</a>

Add your anchor tag linked to your large image. Mine was a picture of my cat. I had my image set up at 6 x 9, Saved for Web, at 72ppi.

Next comes the Title attribute. The title is what makes the caption. If you do not want captions you can just not use the title.

The rel attribute comes next. It tells the browser the relationship between the anchor and the related attribute - in this instance it is telling the browser that we are creating a lightbox.

RIght next to the lightbox is [animals] - this is the group that my photos are in. If you want single photos, delete this part. You can name it whatever makes sense. My photos are all about animals - so animals was a clear descriptive name to give the group. The whole group needs the same name.

Next is my thumbnail image. I set them all up at a width of 100px and a height of 55px. Your thumbnail does not have to include the entire image. It can be a teaser image.

Be sure to add a link back to the Lightbox Website and a copyright for him. Great program - we need to say thanks and give him credit.

Lightbox 2.04 by Lokesh Dhakar

Add the link to the website too. http://www.huddletogether.com/projects/lightbox2/

Close your anchor tag and either add more images following this same example or close your div tag and html tag.
</div>

</html>

Try it out. Add some WOW - to your website.

REMEMBER: When you upload to your server, upload the js folder with ALL the javascripts in it, the images from his images folder, and the css folder. If any of the pieces are missing, it will not work.

You can view and copy the source code on either of my sample Lightbox pages.