PDA

View Full Version : Resolved Lightbox Help



enelle
05-21-2009, 06:01 PM
1) Script Title: Lightbox 2.03a

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

3) Describe problem: Hello. I am no web developer, so please be considerate with your descriptions, if you are able to help. I'm having trouble with my lightbox. The close and loading images are not showing up. I know many people have the same problem, but I don't see much of them resolved except on wordpress. But I'm not using wordpress. Here is my site with the gallery portion.
http://enellelovelle.110mb.com/check1.htm

My 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://enellelovelle.110mb.com/lightbox/images/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://enellelovelle.110mb.com/lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(http://enellelovelle.110mb.com/lightbox/images/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 look in the css and I find nothing about the close or loading images. Is this the problem? Can I add them in myself and if I can, where would I put them. I hope somebody can help, I'd really appreciate it. If it can't be help, does anyone know how I'd be able to remove the images at all (the broken images showing up). Thank you.

traq
05-21-2009, 10:45 PM
the images are not (and should not be) referenced in the css file.
did you make sure these lines (near the top of your lightbox.js file) match the location of the images on your server?


var fileLoadingImage = "images/loading.gif";
var fileBottomNavCloseImage = "images/closelabel.gif";

enelle
05-22-2009, 12:33 AM
Thank you so much for your help. I had not known I was to edit anything in the .js files, I would have never thought of it. Now everything works smoothly! I've been to other message boards asking for help but I could not understand much of what they meant. Thank you so much, your direction was simple and easy to follow.