PDA

View Full Version : 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/dynamicindex4/lightbox/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 (http://www.dynamicdrive.com/forums/showthread.php?t=6) 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:


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


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