PDA

View Full Version : Lightbox javascript is not working online


Jeffrey81
03-26-2009, 11:05 AM
I have created a Lightbox java script and it works alright on my preview / browser on Dreamweaver. Whenever I upload to the internet, though, it doesn't work any more. I have checked my permissions with my server and they are set the right way. Anyways, I have tried to fix the problem for 8 hours straight, but definitely need some help by now. Thanks for any help!
wysiwyg
03-26-2009, 11:18 AM
The paths to the files are probably wrong.
Jeffrey81
03-26-2009, 11:26 AM
Dreamweaver has just given me a message that says:

Found 2 errors in lightbox.css
Affects: Numerous Internet Explorers

But where do I find another stylesheet for this?
Jeffrey81
03-26-2009, 01:03 PM
Well - I have tried it 8 hours straight and I am starting to get annoyed, so I need help, because I am apparently not smart enough, today.
Thanks so much for any help or advice.

Here's my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Paintings</title>
<script type="text/javascript" src="lightbox2/prototype.js"></script>
<script type="text/javascript" src="lightbox2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox2/lightbox.js"></script>
<link rel="stylesheet" href="lightbox2/lightbox.css" type="text/css" media="screen" />
</head>

<body>
<div id="wrapper"><img src="images/paintings.jpg" width="280" height="110" hspace="460" /></div>
<div id="wrapper"><img src="images/signature.jpg" width="200" height="80" hspace="500" /></div>
<p>&nbsp;</p>
<p><strong>NATIVE HEADS SERIES </strong></p>
<p>(click to enlarge)</p>
<p>&nbsp;</p>
<p><a href="images/Paintings/Beige-Bubbles-152x122.jpg" rel="lightbox[nativeheads]" title="152 x 122 cm"><img src="images/Thumbnails/Beige-Bubbles-S-152x122.jpg" width="85" height="67" border="0" /></a><a href="images/Paintings/Red-152x122.jpg" rel="lightbox[nativeheads]" title="152 x 122 cm"><img src="images/Thumbnails/Red-S-152x122.jpg" width="68" height="85" hspace="25" border="0" /></a><a href="images/Paintings/Blue-102x76.jpg" rel="lightbox[nativeheads]" title="102 x 76 cm"><img src="images/Thumbnails/Blue-S-102x76.jpg" width="85" height="63" border="0" /></a><a href="images/Paintings/Pink-Bubbles-102x76.jpg" rel="lightbox[nativeheads]" title="102 x 76 cm"><img src="images/Thumbnails/Pink-Bubbles-S-102x76.jpg" width="85" height="63" hspace="25" border="0" /></a>
<a href="images/Paintings/Orange-101x76.jpg" rel="lightbox[nativeheads]" title="101 x 76 cm"><img src="images/Thumbnails/Orange-S-101x76.jpg" width="85" height="64" border="0" /></a><a href="images/Paintings/Olive-Bubbles-91x61.jpg" rel="lightbox[nativeheads]" title="91 x 61 cm"><img src="images/Thumbnails/Olive-Bubbles-S-91x61.jpg" width="85" height="56" hspace="25" border="0" /></a></p><p>
<a href="images/Paintings/Pink-Bubbles-91x61.jpg" rel="lightbox[nativeheads]" title="91 x 61 cm"><img src="images/Thumbnails/Pink-Bubbles-S-91x61.jpg" width="57" height="85" border="0" /></a><a href="images/Paintings/Light-Green-76x51.jpg" rel="lightbox[nativeheads]" title="76 x 51 cm"><img src="images/Thumbnails/Light-Green-S-76x51.jpg" width="85" height="55" hspace="25" border="0" /></a><a href="images/Paintings/Purple-61x61.jpg" rel="lightbox[nativeheads]" title="61 x 61 cm"><img src="images/Thumbnails/Purple-S-61x61.jpg" width="85" height="85" border="0" /></a><a href="images/Paintings/Pastel-60x50.jpg" rel="lightbox[nativeheads]" title="60 x 50 cm"><img src="images/Thumbnails/Pastel-S-60x50.jpg" width="85" height="70" hspace="25" border="0" /></a><a href="images/Paintings/Green-50x40.jpg" rel="lightbox[nativeheads]" title="50 x 40 cm"><img src="images/Thumbnails/Green-S-50x40.jpg" width="85" height="68" border="0" /></a><a href="images/Paintings/Dark-Orange-20x16.jpg" rel="lightbox[nativeheads]" title="20 x 16 cm"><img src="images/Thumbnails/Dark-Orange-S-20x16.jpg" width="85" height="64" hspace="25" border="0" /></a></p>
<p><a href="images/Paintings/Dark-Red-20x16.jpg" rel="lightbox[nativeheads]" title="20 x 16 cm"><img src="images/Thumbnails/Dark-Red-S-20x16.jpg" width="85" height="64" border="0" /></a><a href="images/Paintings/Gold-18x13.jpg" rel="lightbox[nativeheads]" title="18 x 13 cm"><img src="images/Thumbnails/Gold-S-18x13.jpg" width="85" height="59" hspace="25" border="0" /></a><a href="images/Paintings/Thick-Fire-15x10.jpg" rel="lightbox[nativeheads]" title="15 x 10 cm"><img src="images/Thumbnails/Thick-Fire-S-15x10.jpg" width="85" height="56" border="0" /></a><a href="images/Paintings/Thin-Fire-15x10.jpg" rel="lightbox[nativeheads]" title="15 x 10 cm"><img src="images/Thumbnails/Thin-Fire-S-15x10.jpg" width="85" height="56" hspace="25" border="0" /></a><a href="images/Paintings/No-15x10.jpg" rel="lightbox[nativeheads]" title="15 x 10 cm"><img src="images/Thumbnails/No-S-15x10.jpg" width="56" height="85" border="0" /></a><a href="images/paintings/turquoise-15x10.jpg" rel="lightbox[nativeheads]" title="15 x 10 cm"><img src="images/Thumbnails/Turquoise-S-15x10.jpg" width="55" height="85" hspace="25" border="0" /></a></p>
<p>&nbsp;</p>
<p><a href="main.html"><img src="images/menu-logo.jpg" width="210" height="170" border="0" alt="Menu" /></a></p>
</body>
</html>
wysiwyg
03-26-2009, 01:27 PM
Can you provide a url?
Jeffrey81
03-26-2009, 01:31 PM
certainly

http://www.artofelsener.com/paintings.html
Bob Barr
03-26-2009, 01:47 PM
certainly

http://www.artofelsener.com/paintings.html
When I put my mouse over the URLs for the thumbnails in Firebug, the images appear. When I mouse over the URLs in the 'Paintings' folder, nothing appears.

Did you perhaps name the folder for the full-size images 'paintings' rather than 'Paintings'? If you're developing on Windows, the case difference won't affect you but, under Linux hosting, it will.
Jeffrey81
03-26-2009, 01:56 PM
From what I saw, the folder in Dreamweaver is "Paintings". Is that what you mean? I work with OS X. I don't understand why I can get a working preview in Dreamweaver but online it won't happen.
Early Out
03-26-2009, 01:58 PM
You might do better in a forum dedicated to Lightbox: http://www.huddletogether.com/forum/. I'm not familiar with that forum, but a quick glance tells me that coming up with a very good, descriptive thread title may be the key to getting help.

Having said that, however, I think I've stumbled on your problem. The images that are supposed to open up in the Lightbox aren't where the HTML thinks they are. For example, I see this:


<a href="images/Paintings/Beige-Bubbles-152x122.jpg" rel="lightbox[nativeheads]" title="152 x 122 cm">

But when I point my browser to http://artofelesener.com/images/Paintings/Beige-Bubbles-152x152.jpg, I get a 404 error - not found. The Paintings subdirectory is there, but there's only one file in it, and it's not one of the paintings.
Jeffrey81
03-26-2009, 02:25 PM
Thanks for the hint.
I thought I had put the files in the correct folder, which is the Paintings folder, but apparently they're not. How can I fix this?
Early Out
03-26-2009, 02:36 PM
I don't know Dreamweaver. But outside of DW, you should be able simply to upload the image files to the correct subdirectory, using any standalone FTP client program, like FileZilla.
wysiwyg
03-26-2009, 04:39 PM
Well, aside from the missing images, you're missing the javascript file "scriptaculous.js" in /lightbox2/.
Jeffrey81
03-27-2009, 05:16 AM
Thanks for the help. I am still a bit confused, but will work on the issue today. Where do I put the scriptaculous.js in? it's already in the <head>. So where else should I put it? Regarding the images. My large images are not in the same folder as my thumbnails, but both folders are in the images folder. (with all my htmls) I think, that should be ok.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Paintings</title>
<script type="text/javascript" src="lightbox2/prototype.js"></script>
<script type="text/javascript" src="lightbox2/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox2/lightbox.js"></script>
<link rel="stylesheet" href="lightbox2/lightbox.css" type="text/css" media="screen" />
</head>
Early Out
03-27-2009, 05:53 AM
The scriptaculous.js file is simply not on the server. Your HTML is looking for it at http://www.artofelsener.com/lightbox2/scriptaculous.js, and it's not there. The other two Javascript files, on the other hand, are exactly where the HTML expects them to be.

Your Paintings images are still not there. The HTML is looking for them at http://www.artofelsener.com/images/Paintings, but that subdirectory has only one file in it.

There's no mystery, here. When the HTML says, "go to such-and-such a subdirectory and display such-and-such a file," that file has to be there.
Jeffrey81
03-27-2009, 06:56 AM
I am a pain in the butt for you, sorry about that. In Dreamweaver, all my large images are in the Paintings folder, the small ones are in the Thumbnail folder. (Those are in the image folder) The scriptaculous.js file is in the lightbox2 folder. I don't understand why it won't upload to the server!? Is there another way I can get the server to uload those files?
Early Out
03-27-2009, 07:02 AM
Use any standalone FTP client program, like FileZilla, to upload the files. FileZilla is free (here (http://filezilla-project.org/)), and there's a BH tutorial about how to set it up and use it (here (http://tutorials.bluehost.com/filezilla/)).
wysiwyg
03-27-2009, 08:06 AM
How exactly did you upload the files that are there?
Jeffrey81
03-27-2009, 08:20 AM
I uploaded now everything with Filezilla into the Paintings and Thumbnails folders in my /public_html. I also dragged the scriptaculous.js to the lightbox2 folder. I believe it still does not work. Are there any other files missing?
wysiwyg
03-27-2009, 08:40 AM
It actually is working, except for the last image, which has the path in lowercase (it's case-sensitive), and the images for lightbox are missing (like /lightbox2/closelabel.gif).
Early Out
03-27-2009, 08:42 AM
It's working for me - try refreshing your browser cache (CTRL-F5 while viewing the page).
Early Out
03-27-2009, 08:43 AM
Yes, I noticed that there are no buttons. Clicking will go to the next image, and ESC will close, but it needs to be able to find those GIFs!
Jeffrey81
03-27-2009, 08:57 AM
Thanks guys for supporting me. I think it works now, at least when I try it. The previous / next arrows still don't appear, though. Your help is appreciated very much.
Bob Barr
03-27-2009, 09:24 AM
Thanks guys for supporting me. I think it works now, at least when I try it. The previous / next arrows still don't appear, though. Your help is appreciated very much.
If I'm not mistaken, there's a setting (or two) in one of the '.js' files for specifying the directory that contains the button and arrow gifs. Sorry, I don't recall which of the files that is.
Early Out
03-27-2009, 10:05 AM
When you start getting into the specifics of options within the Lightbox scripts, that really is where you'd get better feedback on a forum dedicated to Lightbox (link above). You might stumble on someone in these forums who knows the script, but it's more of a longshot.
Jeffrey81
03-27-2009, 10:10 AM
Will do so. Thanks again for your help!