Lightbox Image viewer help

**kajagoogoo** · 06-01-2006, 04:16 AM

I downloaded the zip file needed and uploaded it to my site and made sure all teh paths were correct and complete and it's not working for me.
I'm not real sure what I'm doing wrong other than the fact that I am a total beginner.
Any help would be totally appreciated.
Here's the link: http://wahmteststore.com/gallery.htm

Sorry, here's the script link: http://www.dynamicdrive.com/dynamici...tbox/index.htm

Thanks again,
Kaj

**djr33** · 06-01-2006, 04:31 AM

Warning: Please include a link to the DD script in question in your post. See this thread for the proper posting format when asking a question.

And... what's it supposed to do?

Congrats... it's a thumbnail, then links to bigger.
But... what are you trying to get?

Ah.... looking at the source... the path to your .js file is either wrong, or the file isn't uploaded.
You need to link to an existing javascript on your server... http://wahmteststore.com/lightbox.js doesn't exist.

**kajagoogoo** · 06-01-2006, 04:40 AM

I uploaded it, but let me try again...

**djr33** · 06-01-2006, 04:46 AM

Looking... seems to work now.
Slightly boring without a layout.. but there ya go.

**kajagoogoo** · 06-01-2006, 04:46 AM

I originally put it in the wrong directory, it's coming together slowly now. It just will not show the overlay.
Thanks!

**djr33** · 06-01-2006, 05:21 AM

Alright, cool.

Not sure about the overlay.

The css controls that, it looks like, and the css file is in the directory that the url in your source refers to... so.... should be working, I think.

**jscheuer1** · 06-01-2006, 06:02 AM

This is what is supposed to be in the file lightbox.css:

Code:

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

This is what is in your lightbox.css file on the server:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <meta name="Generator" content="Cocoa HTML Writer">
  <meta name="CocoaVersion" content="824.38">
  <style type="text/css">
    p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica}
    p.p2 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; min-height: 14.0px}
    span.Apple-tab-span {white-space:pre}
  </style>
</head>
<body>
<p class="p1">#lightbox{</p>
<p class="p1"><span class="Apple-tab-span">	</span>background-color:#eee;</p>
<p class="p1"><span class="Apple-tab-span">	</span>padding: 10px;</p>
<p class="p1"><span class="Apple-tab-span">	</span>border-bottom: 2px solid #666;</p>
<p class="p1"><span class="Apple-tab-span">	</span>border-right: 2px solid #666;</p>
<p class="p1"><span class="Apple-tab-span">	</span>}</p>
<p class="p1">#lightboxDetails{</p>
<p class="p1"><span class="Apple-tab-span">	</span>font-size: 0.8em;</p>
<p class="p1"><span class="Apple-tab-span">	</span>padding-top: 0.4em;</p>
<p class="p1"><span class="Apple-tab-span">	</span>}<span class="Apple-tab-span">	</span></p>
<p class="p1">#lightboxCaption{ float: left; }</p>
<p class="p1">#keyboardMsg{ float: right; }</p>
<p class="p1">#closeButton{ top: 5px; right: 5px; }</p>
<p class="p2"><br></p>
<p class="p1">#lightbox img{ border: none; clear: both;}<span class="Apple-converted-space"> </span></p>
<p class="p1">#overlay img{ border: none; }</p>
<p class="p2"><br></p>
<p class="p1">#overlay{ background-image: url(http://wahmteststore.com/fpdb/images/overlay.gif); }</p>
<p class="p2"><br></p>
<p class="p1">* html #overlay{</p>
<p class="p1"><span class="Apple-tab-span">	</span>background-color: #333;</p>
<p class="p1"><span class="Apple-tab-span">	</span>back\ground-color: transparent;</p>
<p class="p1"><span class="Apple-tab-span">	</span>background-image: url(blank.gif);</p>
<p class="p1"><span class="Apple-tab-span">	</span>filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://wahmteststore.com/fpdb/images/overlay.gif", sizingMethod="scale");</p>
<p class="p1"><span class="Apple-tab-span">	</span>}</p>
</body>
</html>

Fix that and the overlay will work.

Thread: Lightbox Image viewer help

Thread Tools

Search Thread

Lightbox Image viewer help

Bookmarks

Bookmarks

Posting Permissions