Results 1 to 4 of 4

Thread: Trouble with Lightbox

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

    Default Trouble with Lightbox

    1) Script Title: Lightbox 2.03a

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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/q...=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' :

    Code:
    <!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

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

    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://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.

  2. #2
    Join Date
    Sep 2008
    Location
    Bristol - UK
    Posts
    842
    Thanks
    32
    Thanked 132 Times in 131 Posts

    Default

    You really need to validate your code, 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.

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

    enelle (03-29-2009)

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

    Default

    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.

  5. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,135
    Thanks
    44
    Thanked 3,231 Times in 3,192 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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
  •