Problem with lightbox js

**Belanos** · 02-08-2008, 03:05 PM

Hey guys Im trying to get lightbox JS going on a site before I get it hosted. The problem is that when I click on the images it pushes them down the page making it longer instead of blacking out the page and opening them above it. I'm sure I have a coding issue that is very simple to correct. I'm just not seeing it. I have pasted the source below. I hope someone can help me. I also have the JS in the directory with my index.html allong with the images and lightbox directories.

<html>
<head>
<link rel="stylesheet" href="cs/lightbox.css" type="text/css" media="screen">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
</head>
<p align=center><img src="images\banner.jpg"></p>
<h1 align=center><font color=#ffffff>Erin Riley McCarthy</font></h1>
<body bgcolor=#ff66ff >
<img style="position:absolute; top:0; left:643; width:360;" src="images\triangle.gif">
<img style="position:absolute; top:15; left:50; width:900;" src="images\banner.jpg">
<img style="position:absolute; top:150; left:-100; width:360;" src="images\dot.gif">
<img style="position:absolute; top:1200; left:600; width:360;" src="images\dot.gif">
<img style="position:absolute; top:600; left:400; width:360;" src="images\dot.gif">
<div id=layer1 style="position:absolute; top:250; left:55; width:900; height:450; z-index:1; padding:5px; border: #000000 0px solid; background-color:#000000; background-image:url(images\bg.jpg); layer-background-image:url(images\bg.jpg);">
<div id=layer2 style="position:absolute; top:20; left:50; width:480; height:360; z-index:2; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(http://i90.photobucket.com/albums/k2...2/IMG_0320.jpg); layer-background-image:url(http://i90.photobucket.com/albums/k2...2/IMG_0320.jpg);">
<div id=layer3 style="position:absolute; top:53; left:320; width:480; height:360; z-index:3; padding:5px; border: #000000 2px solid; background-color:#000000; background-image:url(http://i90.photobucket.com/albums/k2...2/IMG_0318.jpg); layer-background-image:url(http://i90.photobucket.com/albums/k2...2/IMG_0318.jpg);">
<div id=layer4 style="position:absolute; top:-95; left:400; width:149; height:216; z-index:4; padding:5px; border: #000000 0px solid; background-color:#000000; background-image:url(http://i90.photobucket.com/albums/k2...pinkbanner.jpg); layer-background-image:url(http://i90.photobucket.com/albums/k2...pinkbanner.jpg);">
</div>
<img style="position:absolute; top:500; left:-320; width:800;" border=2 src="images\IMG_0238.jpg" alt="riley"><a href="images\IMG_0238.jpg" rel="lightbox">
<a href="images\IMG_0315a.jpg" "rel=lightbox"><img style="position:absolute; top:400; left:-400; width:200;" border=2 src="images\IMG_0315.jpg" alt="dad and riley">
<div class="thumbnail">
<a href="images\IMG_0313a.jpg" rel="lightbox"><img style="position:absolute; top:400; left:-150; width:200;" border=2 src="images\IMG_0313.jpg" alt="mom and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0317a.jpg" rel="lightbox"><img style="position:absolute; top:400; left:100; width:200;" border=2 src="images\IMG_0317.jpg" alt="riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0325a.jpg" rel="lightbox"><img style="position:absolute; top:400; left:350; width:200;" border=2 src="images\IMG_0325.jpg" alt="Bobby and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0239a.jpg" rel="lightbox"><img style="position:absolute; top:600; left:-400; width:200;" border=2 src="images\IMG_0239.jpg" alt="mom and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0240a.jpg" rel="lightbox"><img style="position:absolute; top:800; left:-400; width:200;" border=2 src="images\IMG_0240.jpg" alt="mom and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0242a.jpg" rel="lightbox"><img style="position:absolute; top:1000; left:-400; width:200;" border=2 src="images\IMG_0242.jpg" alt="dad and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0321a.jpg" rel="lightbox"><img style="position:absolute; top:1000; left:-150; width:200;" border=2 src="images\IMG_0321.jpg" alt="great grandpa and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0310a.jpg" rel="lightbox"><img style="position:absolute; top:1000; left:100; width:200;" border=2 src="images\IMG_0310.jpg" alt="grandma and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0294a.jpg" rel="lightbox"><img style="position:absolute; top:1000; left:350; width:200;" border=2 src="images\IMG_0294.jpg" alt="nurse and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0302a.jpg" rel="lightbox"><img style="position:absolute; top:600; left:350; width:200;" border=2 src="images\IMG_0302.jpg" alt="nurse and riley">
</div>
<div class="thumbnail">
<a href="images\IMG_0308a.jpg" rel="lightbox"><img style="position:absolute; top:800; left:350; width:200;" border=2 src="images\IMG_0308.jpg" alt="mom and riley">
</div>
</body>
</html>

**LadynRed** · 02-08-2008, 03:32 PM

Get rid of all that position:absolute stuff

**Belanos** · 02-08-2008, 03:36 PM

That didn't help

**LadynRed** · 02-08-2008, 03:45 PM

Do you have the page on the web somewhere so we can see what's going on ?

**Belanos** · 02-08-2008, 04:01 PM

Not yet but when I do I'll reply to this post and try to get some help then

**LadynRed** · 02-09-2008, 12:35 PM

Do that, it'll be easier to see what's going on

**AliKat** · 02-10-2008, 05:06 PM

Just a quick question should it be:

Quote:

or should it be

Code:

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen">

But it sounds like the css isn't working but the javascript is.

**Belanos** · 02-12-2008, 04:43 PM

That had allot to do with it AliKat. I had to change some other things as well and do some fine tuning but I got it working just fine now. Thanks to both of you for your time.