Results 1 to 3 of 3

Thread: Lightbox Help

  1. #1
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default Lightbox Help

    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
    Code:
    #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.
    Last edited by Snookerman; 05-22-2009 at 05:14 AM. Reason: added “Resolved” prefix

  2. #2
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    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?
    Code:
    var fileLoadingImage = "images/loading.gif";		
    var fileBottomNavCloseImage = "images/closelabel.gif";

  3. The Following User Says Thank You to traq For This Useful Post:

    enelle (05-22-2009)

  4. #3
    Join Date
    Mar 2009
    Posts
    4
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    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.

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •