Trying to use javascript in one page (WebDev 12)

Hi all,
I'm trying to use "Lightbox" in one of the pages of my project. This is a simple, unobtrusive script used to overlay images on the current page. I want to to use this javascript to show some screenshots on my page. (If someone want this javascipt I can sended to you :-))
I've downloaded this javascript from a page. It is a .zip file with 4 .js files, some .gif files and a .css file. I've also a file with the explanation about how to implement this script :-) but I've never used javascript :-( so please I need your help about how to use this in WebDev.

The instructions are:
1) Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order).
script type="text/javascript" src="js/prototype.js">
script type="text/javascript" src="js/scriptaculous.js?load=effects,builder">
script type="text/javascript" src="js/lightbox.js">

(I've included this 3 scripts in my page in "Advanced" in the "Javascript" tab. I think this step is ok.)

2) Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).
link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"

(My question here is where should I add this?)

3) Check the CSS and make sure the referenced prev.gif and next.gif files are in the right location. Also, make sure the loading.gif and close.gif files as referenced near the top of the lightbox.js file are in the right location.

(I guess I can handle this one)

4) Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:
a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1
Optional: Use the title attribute if you want to show a caption.

(Again, same question: where should I add this?)

5) If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:
a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1
a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2
a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3

I understand this but again I don't know where should I use this code.

Sorry but as you can see I don't understand so much how to use a javascript and I would like to start learning how to implment this simple sript.
Any help will be appreciated. Thanks in advance.

Regards

Victoria Caballero
Copenhague
Denmark

Hi Victoria,

I just created a sample project in WebDev 11 that should get you going.

http://www.windevtutorials.com/downloads/lightbox_tutorial.zip

In this particular case, don't use the javascript tab in the advanced section of the page. Instead, manually reference the script files in the HTML section tab along with the css file.

Next thing is to check out the advanced tab of the image for the "Before" and "After" html.

Hope this helps.

Edit: Just put a new version up that shows you how to programmatically set the link value.

Cheers!
Ken

PS. You also need to call the initLightbox() method in the onload of the page.



Edited 2 time(s). Last edit at 08/24/2008 01:25AM by KenKnight.

Hi Ken,
thank you very much for your response and for the time you have taked to make the example.
I've followed your instructions (according with your example) but I couldn't make it work :-( in my project.

First I've added in the Html tab of the page the code, then in the image I've added the html "Before" and "After". Then in "Onload" the page in JS I've added the call to the method initLightbox(). Then compile and test. When open the page I can see beside the image a kind of link control that says "image #1", Why is that? If I click in this link nothing happens. I think it shouldn't work like that. I don't understand what is wrong.
I've placed the files .js in a folder "js", the images in "images" and the .css in the folder "css", all this folder inside the "Myproject_WEB", is that ok? Could be this the problem?

Thank you very much again.

Regards

Hi,

Here are the steps that should get you up and going.

1) When you extract the lightbox source from the zip file, copy the files and folders (not the parent folder) into your MyProject_WEB\UK folder.

2) copy the <script and <link lines out of the advanced tab of the page description in the example project I sent into your project.

3) In the onload event of the page, switch to Javascript mode and put in the "initLightbox();" (no quotes) method.

4) Drop a clickable image on the page and set it to custom link. In the custom link field, put in: path_to_image/image_name.jpg" rel="lightbox" title="My Caption

When doing this programmatically make sure you pay attention to where you need literal quotes.

The image name and path referenced above should be the full size image you want to display in the lightbox.

Hope this helps.

Cheers!
Ken

Hi Victoria,

Unfortunately we're going to have to take this off line and communicate via email. I've tried to respond to two posts today and the forum comes up with "error occurred", apparently treating the post as some type of spam.

Send me an email at kenknight@helpconsulting.net

Cheers!
Ken