Log in

View Full Version : Trouble with Lightbox


enelle
03-29-2009, 01:33 AM
1) Script Title: Lightbox 2.03a

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

3) Hello. I hoping someone can help me with my lightbox. I've searched google for other people's similar troubles to learn off the advice given there. There was another person whom had the exact same problem as I have, but I did not understand the helper's instructions. I am quite the novice. My problem is that when I click on my images that should be popping up in a larger scale, are instead being opened through a new page. Since I'm new to web-making, I'll show you what I have and maybe someone can see the problem I am missing.

Here is my directory. http://s461.photobucket.com/albums/qq338/enelle/blogging/?action=view&current=directory.jpg
The page where I am trying to use the lightbox http://enelle-illustrations.110mb.com/trying.htm

The lightbox portion within the 'head' :


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ENELLE ILLUSTRATIONS</title>
<script type="text/javascript" src="http://enelle-illustrations.110mb.com/lightboxjs/prototype.js"></script> <script type="text/javascript" src="http://enelle-illustrations.110mb.com/lightboxjs/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox.js"></script>
<link media="screen" type="text/css" href="http://enelle-illustrations.110mb.com/lightboxcss/lightbox.css" rel="stylesheet" /> <style type="text/css">body { background: #171717; background-image: url(http://enelle-illustrations.110mb.com/images/bkgd.png);

my code with the images and thumbnails



<p><a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus1.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb1.jpg" alt="" /></a> <a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus2.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb2.jpg" alt="" /></a> <a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus3.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb3.jpg" alt="" /></a> <a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus4.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb4.jpg" alt="" /></a> <a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus5.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb5.jpg" alt="" /></a> <a title="" rel="lightbox[illustrations]" href="http://enelle-illustrations.110mb.com/gallery/illus6.jpg"><img src="http://enelle-illustrations.110mb.com/thumbs/illusthumb6.jpg" alt="" /></a></p>

My lightbox css :


#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(http://enelle-illustrations.110mb.com/lightboximages/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(http://enelle-illustrations.110mb.com/lightboximages/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://enelle-illustrations.110mb.com/lightboximages/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 500px;
background-color: #000;
}


/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}


/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

I haven't changed anything in the lightboxjs because I figured I shouldn't mess with it. But maybe I'm supposed to change something in it? When I opened up the file, I hadn't understood anything within, I've never worked with javascript before.

I'm hoping my examples will help anybody spot something I must have done wrong or neglected. I would very much appreciate any help, and I apologize for the trouble.
Schmoopy
03-29-2009, 01:55 AM
You really need to validate your code (http://validator.w3.org/check?uri=http%3A%2F%2Fenelle-illustrations.110mb.com%2Ftrying.htm&charset=(detect+automatically)&doctype=Inline&group=0), as at the moment firebug shows your page having errors in the HTML, Javascript and CSS so it's not looking good. Just go to that link above and it should tell you how to go about solving the problems.

It may well not be the problem with lightbox, but if you installed it as it instructed it should be pretty straightforward.

I'm pretty sure it's to do with an error in your JavaScript somewhere, so it stops the lightbox script from executing, but anyway - validate your code first and see if that solves the problem.
enelle
03-29-2009, 05:34 AM
Thank you for your response. I'll be correcting it tonight, most of it I don't understand since I've never dealt much into css, but I'm willing go beyond the basics.
jscheuer1
03-29-2009, 10:23 AM
Often there is a problem with valid code, but usually there is also a real problem. Scripts won't usually do absolutely nothing simply because your HTML or css isn't valid, they will often screw up, but at least do something.

Anyways, there is no:

http://enelle-illustrations.110mb.com/js/lightbox.js

You at least need to upload the script to where the page is expecting to find it.