Lightbox help

bode · September 19th, 2008, 11:19 AM

I'm building my first website using Adobe GoLive CS2 and everything is looking fairly good so far.

I need an image gallery and was under the impression that Lightbox 2.04 would be easy! I can't get this working at all. I've searched the web, but nothing helps.

Go Live creates a root folder for the site containing - web content, web data and web settings with the site file itself.

Where should the Lightbox files be placed? At the moment I have the three Lightbox folders inside web-content with the rest of the site files.

Where do all the lines of code go within the html? I've followed these instruction but unclear with 2.
http://www.huddletogether.com/projects/lightbox2/#how

Any help appreciated.

stu2000 · September 19th, 2008, 11:42 AM

Hi bode,

When you unzip the Lightbox download, there should be a few of folders, copy the folders 'js', css' and 'images' onto your server in the same directory as your file.

once there, at the top of your page, in between your <head></head> tags, you copy the following:

Code:

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

You can see from the JavaScript above, lets take the first one for example, it's telling the code to search for a file called 'prototype.js' in the folder 'js' (js/prototype.js)... so this means that the folder 'js' must be in the same folder or directory as the file that you are pasting this code above into.

I hope that helps!

bode · September 22nd, 2008, 09:50 AM

Hi,

Thanks for the reply. I managed to work it out (kind of). I understand the code a lot better now that I know that src is an address for the code to look.

I uploaded the code to my public html file removing the folders:
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

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

I still have a few things to work out also:

Changing the position of the gallery image (move up a few pixels)
Changing border colours.