Thread: Lightbox 2.03a

Hello,

I want to build in Lightbox 2.03 in my future website, so when people click on a picture they see the picture in bigger size. I downloaded the software. But after that I really don't know what to do. They have an installation instruction, but I really don't understand any of that. I will post the instruction below, maybe someone can explain it to me in normal words what to do.

Many many thanks,

This is the instruction:

Step 1: Insert the below code in the HEAD section of your page:

<script type="text/javascript" src="js/prototype.js"></script><script type="text/javascript" src="js/scriptaculous.js?load=effects"></script><script type="text/javascript" src="js/lightbox.js"></script><link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /(now where is the head section of the page?)

Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library.

Step 2: Create your "thumbnail" image links, for example:
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>

The rel attribute is mandatory in order to activate the effect for this particular image. The "title" attribute is optional, and when defined, adds a caption beneath the enlarged image.
The "href" attribute obviously should contain the path to the enlarged image.
If you wish a particular caption ("title") to be hyperlinked to a specific URL, throw in a "rev" attribute pointing to the desired URL. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption" rev="http://www.dynamicdrive.com">image #1</a>
LightBox version 2 also adds the ability to group multiple image links together, so an image gallery is created out of the enlarged images:

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a><a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a><a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

As you can see, to group image links together, simply modify the "rel" attribute to be "lightbox[roadtrip]" instead, where "roadtrip" is an
arbitrary but unique name for that group. You can have multiple groups of images on the same page- just use a unique group name in each case.
Grouped images can be cycled through by clicking on the right/left edges of each enlarged image.

(well I didn't even get through step 1, so this is even more bla bla to me:P)

many many thanks

Moad Chekh

Hi, if your new to website scripts? you would be better using Jalbum its very flexible & will do the same with the right skin. Only an idea.

Are there any tutorials on using Lightbox?

I would simply like to learn how to use it.

I may implement it on some of the websites I am working with.
But need to at least see some tutorial on its use.

Thank you

Ram_Industries
Robert Montgomery

are you referring to the light house tool Blue Voda offers? if so:
1. click on the tool on the left side and position in the middle of your viewing area.
2. double click the tool and a configuration box comes up.
3. choose the size of picture you want with a drop down menu. if your site is 800 pixels wide you cannot choose 240 x 240 with 4 across, but you could do 3 across.
4. it is important that all your pictures are the same size to start. a good size is 600 x 450 or something like that. when someone clicks on the picture, this is the picture that will come up. if you do not have the pictures the same size to start with, you must use variable as the option. 5. you add a picture by clicking the add button and it will browse to the place you have your pictures on your harddrive.
a good example of using light house is:
www.scanportonline.com/barrettes.html
this whole site uses lighthouse throughout.
hope this helps
mrmagoo144
www.videopostcards.info