where does the javascript go?

**baldrn** · 11-20-2010, 04:04 PM

1) Script Title: Lightbox image viewer 2.03a

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem:
New to using javascript.
In the above script instructions, I'm not getting something basic.
-I have downloaded that script.
-I've copied pasted what's instructed into the head
-uploaded the lightbox css.
-I've created my thumbnail and larger image.
-I know I have to upload the script but don't know where to put it. a folder?
in the header?
I'm referring to:
effects.js
lightbox.js
prototype.js
scriptaculous.js
I use Dreamweaver.
Thank you.

**bluewalrus** · 11-20-2010, 04:17 PM

The links to them go in the head of your page. The files them self go on your server.

For example

Code:

<head>
<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>
</head>

These lines tell the browser to go to the folder/directory "js" within the folder/directory the current code is being executed and find the file named prototype.js (for the line with "js/prototype.js") and include it. If you want it to just execute where you have the file put

Code:

<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>

**baldrn** · 11-20-2010, 04:47 PM

Ok, great. just a dir named 'js'. done and uploaded.
Thank you!!

Now...question #2.
A test pic of a fish, thumbnail I want to click on and get the lightbox effect.
<a href="images/fish.jpg" rel="lightbox" title="my caption"><img src=”tn_fish”></a>
on Dw made a quick table, inserted the fish tn, and put the above code inside that table.
js files are all out there, in the 'js' folder.
those header tags are there.
What am I not doing right?
fish not clickable.

**Beverleyh** · 11-20-2010, 05:58 PM

Please post a link to the page so we can check your code and see where the problem is.

**baldrn** · 11-20-2010, 07:54 PM

I went back and added:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> to the header.
And
ref to the lightbox in the test pic string:
<th scope="col"><img src="images/tn_fish.JPG" rel="lightbox" width="150" height="100" /></th>
<a href="images/fish.JPG" rel="lightbox" title="Dead fish"> <img src=”images/tn_fish.JPG”></a>

I need to find one that works and look at it on view source.

**bluewalrus** · 11-20-2010, 10:10 PM

The location of the images is incorrectly coded. You also need to make the css dir and the images dir and put the associated files in there.

images/image-1.jpg" rel="lightbox"><img src="images/thumb-1.jpg

You could do

<a href="images/tn_fish.JPG" rel="lightbox"><img src="images/tn_fish.JPG" rel="lightbox" width="150" height="100" /></a>

This should open the same image in the light box though.

You can see a working demo here http://www.lokeshdhakar.com/projects/lightbox2/#example

**baldrn** · 11-20-2010, 10:23 PM

Ok, it's working....sorta. LOL
it was the css dir. I made one for the lightbox css it was calling for and it worked.
I also corrected some code in the fish string (pardon the pun)
<div align="center"><a href="images/fish.jpg" rel="lightbox"><img src="images/tn_fish.jpg" width="100" height="40" alt="" /></a></div>

Actualy what I did was copy a string from that page you referred me to and subbed my fish image info and it worked.

oh, THANK YOU very much good people.
It's nice not to be laughed at when you learn.
See, those specific instructions aren't included. I can build a rocket if I have instructions. I guess it's assumed those basics are common knowledge.

Now....where is the X to close?

**bluewalrus** · 11-20-2010, 10:26 PM

You need an image directory as well and to put the images in. I think there is js code that detects the 'x' and 'esc' key as well though.

**baldrn** · 11-20-2010, 10:29 PM

Originally Posted by bluewalrus

You need an image directory as well and to put the images in. I think there is js code that detects the 'x' and 'esc' key as well though.

haha, done.
I had the image dir, I just didn't have those images from the lightbox in it.
Thanks!
I need to make myself some notes here.

**baldrn** · 11-20-2010, 10:49 PM

If I want to add more pix to this, I find these instructions on that script site:

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>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

Does that mean to make/add those changes to the lightbox.js itself? I know it isays 'rel attribute'.

Thread: where does the javascript go?

Thread Tools

Search Thread

where does the javascript go?

Bookmarks

Bookmarks

Posting Permissions