Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts

    Question Lightbox Opens and then closes without showing pic

    I can't seem to figure out what I am doing wrong. When you click the photo the script opens and then closes and never shows the slide show.
    Test site : http://www.royalraves.com/test/html/pets.html

    Blackbox.css

    Code:
    #lightbox{
    	position: absolute;
    	top: 0px;
    	left: 0;
    	width: 100%;
    	z-index: 100;
    	text-align: center;
    	}
    
    #lightbox a img{ border: none; }
    
    #outerImageContainer{
    	position: relative;
    	background-color: #f7f6f1;
    	width: 250px;
    	height: 250px;
    	margin: 0 auto;
    	border: 1px #CCC solid;
    border-bottom:0px;
    	}
    
    #imageContainer{
    	padding: 10px;
    	}
    
    #loading{
    	position: absolute;
    	top: 40%;
    	left: 0%;
    	height: 25%;
    	width: 100%;
    	text-align: center;
    	}
    #hoverNav{
    	position: absolute;
    	top: 0;
    	left: 0;
    	height: 0px;
    	width: 0px;
    	z-index: 0;
    	}
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left; }
    #nextLink { right: 0; float: right; }
    #prevLink2, #nextLink2 {
    	font-family:  Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color:#000;
    	font-weight:bold;
             cursor:pointer;
             }
    
    #imageDataContainer{
    	font: 14px Arial, Helvetica, sans-serif;
    	background-color: #f7f6f1;
    	height: 35px;
    	border:1px #ccc solid;
    border-top:0px;
    margin:auto;
    	}
    
    #imageData{
    	padding:0px 10px 10px 10px;
    	}
    #imageData #imageDetails{ width: 50%; float: left; text-align: left; }
    #imageData #caption{ font-weight: bold; font-size:11px; color:#666; max-height:20px; }
    #imageData #numberDisplay{ display: block; clear: left; font-weight: normal; font-size:14px; color:#333; padding-bottom: 5px; }
    #imageData #slideshowLink{ width: 55px; float: right; padding:5px 0px 0 0px;}
    #imageData #bottomNavClose{ width: 55px; float: right; padding:5px 0px 0 0px; }
    
    #overlay{
    	position: absolute;
    	top: 0;
    	left: 0;
    	z-index: 90;
    	width: 100%;
    	height: 500px;
    	background-color: #000;
    	}
    
    .clearfix:after {
    	content: ".";
    	display: block;
    	height: 0;
    	clear: both;
    	visibility: hidden;
    	}
    
    * html>body .clearfix {
    	display: inline;
    	width: 100%;
    	}
    
    * html .clearfix {
    	/* Hides from IE-mac \*/
    	height: 1%;
    	/* End hide from IE-mac */
    	}

    In Head:


    Code:
    <!--- JS Code for album --->
    
    <link rel="stylesheet" href="backbox.css" type="text/css" />
    
    <script type="text/javascript" src="js/prototype.compressed.js"></script>
    
    <script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>
    
    <script type="text/javascript" src="js/lightbox.js"></script>
    
    <script type="text/javascript" src="js/dhtmlHistory.js"></script>
    
    <script type="text/javascript" src="js/customsignsheader.js"></script>

    Code:
    For the album:
      <!--- Album Code for Pets --->
    
    
    
    <div onclick="dhtmlHistory.add('location1',{message: 'backbox'});countdown()">
    
    <a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Benjamin">
    
    <img src="images/pets/7.jpg" alt="Benjamin" width="250" height="180" border="0" /></a>
    
    </div>
    
    <a href="images/pets/1.jpg" rel="lightbox[slide]" caption="Benjamin"></a>
    
    <a href="images/pets/2.jpg" rel="lightbox[slide]" caption="Cat TV"></a>
    
    <a href="images/pets/3.jpg" rel="lightbox[slide]" caption="Hamie"></a>
    
    <a href="images/pets/4.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
    
    <a href="images/pets/5.jpg" rel="lightbox[slide]" caption="Kita"></a>
    
    <a href="images/pets/6.jpg" rel="lightbox[slide]" caption="Paws to you"></a>
    
    <a href="images/pets/7.jpg" rel="lightbox[slide]" caption="Sun Spot"></a>
    
    <a href="images/pets/8.jpg" rel="lightbox[slide]" caption="Yard Work"></a>
    
    <a href="images/pets/9.jpg" rel="lightbox[slide]" caption="Yes"></a>
    
    <a href="images/pets/10.jpg" rel="lightbox[slide]" caption="Best of Buds"></a>
    
    </center>
    
    
    
    </div>
    
    <!--- End of Album Code--->

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok my first statement was wrong. the fucntion countdown() you have attached to the onclick event for the div containing the image, is causing the issue.

    what does countdown() do?
    Last edited by DanInMa; 04-20-2011 at 06:33 PM.

  • Users who have thanked DanInMa for this post:

    samsfriend (04-20-2011)

  • #3
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    also just a side note. Your page loads somewhat slow because the images you are using are 3216x2136 pixels and about 2 megabytes a piece. Bear in mind when you assign a smaller height and width to an IMG element the browser has to download the entire image and compress the image itself. You might want to look into using smaller version of the same images or using a server side solution to compress the smaller versions before sending to the user's browser.
    Also in the slideshow it shows the images at their full sizes, which means pretty much 95% of the people viewing the slideshow will have to scroll left to right and up and down to view the entire image, because most people just don't have a screen large enough to view a 3216x2136 image all at once.

    - food for thought.

  • Users who have thanked DanInMa for this post:

    samsfriend (04-20-2011)

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    51
    Thanks
    18
    Thanked 0 Times in 0 Posts
    That was it. I just removed the
    Code:
    countdown()
    from it and it works. I guess I was having a moment. Also I will take care of the pictures, I must have uploaded the wrong image folder, because the pictures are big. Thanks so much for the help.

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    if you are in a PHP environment, you might want to check out somethign like this - http://phpthumb.sourceforge.net/


  •  

    Tags for this Thread

    Posting Permissions

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