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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Javascript and Lightbox don't get along.

    I've been making and editing my website offline for the past 6 months. I've had my art gallery suited with lightbox and I love the effect it gives off. My problem is is that recently I've decided to use a javascript accordion-type effect in order to display my different art categories and keep the site clean and modern.

    The Good ::
    The javascript is flawless and it works exactly how I want it to. The gallery is not displayed until the category is chosen.

    Problem ::
    When you click on an image, lightbox does not open up. Instead, the image is just sent and opened up on a blank page.

    What I've looked at ::
    I've looked at how the lightbox coding was written before javascript coding entered the html file. And the only difference is that now the lightbox is called up within a javascript div tag.

    I'll post the two codes ::

    Before...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Hazardous Crew</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="images/icon.ico" />
    
        <script type="text/javascript" src="lightbox/prototype.js"></script>
    	<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
    	<script type="text/javascript" src="lightbox/lightbox.js"></script>
    	<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
        
    <style type="text/css">
    <!--
    body {
    	background-color: #131211;
    }
    -->
    </style></head>
    
    <body>
    	<div id="main">
        		<div class="container">
            
            		<div id="header">
                
                		<ul id="menu">
                    		<li><a href="index.html" class="active">Home</a></li>
                    		<li><a href="contact.html">Contact</a></li>
                   		</ul>
                    
                		<div id="logo">
                    			<h1>Hazardouse Crew</h1>
                      		<small>Because art is toxic.</small>
                		</div>
                
               		</div>
                           
          <div id="block_featured" class="block">
    		<img src="images/corner.png" class="page_corner" alt="Hazardous Crew"/>
    
    		<div class="block_inside">
    			Click on a thumbnail to view full size.			
    			<p>
    
    			<h4>Graphic Design ::</h4>
    			<p>
    			<center>
    				   <a href="gallery/large/HC_inc.jpg" rel="lightbox" title="Typography :: [HC] Graphic Design">
                            	<img src="js_gallery/thumb/HC_inc.jpg"></a>
    			<br>
    				   <a href="gallery/large/HC_ruins.jpg" rel="lightbox" title="Graphic Art :: [HC] Ruins'">
                            	<img src="js_gallery/thumb/HC_ruins.jpg"></a>
    			<br>
                               <a href="gallery/large/HC_rocky_mountain.jpg" rel="lightbox" title="Graphic Art :: [HC] Rocky Mountain">
                            	<img src="js_gallery/thumb/HC_rocky_mountain.jpg"></a>
    			<br>
                               <a href="gallery/large/coral_reef.jpg" rel="lightbox" title="Graphic Art :: Coral Reef">
                            	<img src="js_gallery/thumb/coral_reef.jpg"></a>
    
    			</center>
    			<p>
    
    			<h4>Photography ::</h4>
    			<p>
    
    			<center>
                               <a href="gallery/large/logan_yr1.jpg" rel="lightbox" title="Photography :: Logan">
                            	<img src="js_gallery/thumb/logan_yr1.jpg"></a>
    
    			</center>
    		</div>
    	</div>
                
    	<div id="block_portfolio">
    	</div>
    
    </div>
    </div>
    
    	<div id="footer">
        		<div class="container">
            
            		<div class="footer_column long">
                		<h3>Hazardous Crew | Copyright 2009</h3>
                		<p>Layout by Collis Ta‚€™eed</p>
    			</div>
                
           	<div class="footer_column">
                	<h3>Quick Links</h3>
    			<ul>
                      <li><a href="index.html">Home</a></li>
               		<li><a href="contact.html">Contact</a></li>
                	</ul>
                </div>
    
                <div class="footer_column">
                	<h3>Affiliates</h3>
    			<ul>
                      <li><a href="http://vectortuts.com">TutsPlus</a></li>
                      <li><a href="http://spamtheweb.com">SpamTheWeb</a></li>
                      <li><a href="http://explosm.com">Explosm</a></li>
                	</ul>
                </div>
            
    	</div>
    </div>
    </body>
    </html>
    After...

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Hazardous Crew</title>
        <link href="style.css" rel="stylesheet" type="text/css" />
        <link rel="shortcut icon" href="images/icon.ico" />
    
        <script type="text/javascript" src="lightbox/prototype.js"></script>
    	<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
    	<script type="text/javascript" src="lightbox/lightbox.js"></script>
    	<link rel="stylesheet" href="lightbox/lightbox.css" type="text/css" media="screen" />
        
    <style type="text/css">
    <!--
    body {
    	background-color: #131211;
    }
    -->
    </style>
    
    <script type="text/javascript" src="accordian.pack.js"></script>
    
    </head>
    
    <body>
    	<div id="main">
        		<div class="container">
            
            		<div id="header">
                
                		<ul id="menu">
                    		<li><a href="index.html" class="active">Home</a></li>
                    		<li><a href="contact.html">Contact</a></li>
                   		</ul>
                    
                		<div id="logo">
                    			<h1>Hazardouse Crew</h1>
                      		<small>Because art is toxic.</small>
                		</div>
                
               		</div>
                
    		<div id="block_featured" class="block">
    			<img src="images/corner.png" class="page_corner" alt="Hazardous Crew"/>
                	
    			<div class="block_inside">
                    
                   	<div class="image_block">
                      	<img src="images/title_image.jpg" alt="HC"/>
                      </div>
                      
    			<div class="text_block">
                      	<h2></h2>
                      	<small></small>
                          	<p><h4>News & Updates</h4>7.11.09</p>
    				<p></p>
    				<p>Today we have just launched our newest gallery viewer. It gives the site a more clean and modern look. In order to view it properly you must have JavaScript enabled. If you do not have JavaScript we have still kept the <a href="gallery.html">original gallery page scheme here</a>. We hope you all enjoy this method of viewing ___ content. Please, send us an e-mail with your opinion. We like it, but ultimately it's for the viewers. Enjoy.</p>
                            
    			</div>
    		</div>
    	</div>
                
          <div id="block_featured" class="block">
    
    		<div class="block_inside">
    
    <!---START OF JAVASCRIPT ACCORDION--->
    
    <body onload="new Accordian('basic-accordian',5,'header_highlight');">
    
    <div id="basic-accordian" >
    
    
      <div id="test-header" class="accordion_headings header_highlight" ><h4>About Us</h4></div>
      <div id="test-content">
          <div class="accordion_child">
    
        	Lorem ipsum dolor...
    
    	<br></br><br></br>
        	</div>
          </div>
    
      <div id="test1-header" class="accordion_headings" ><h4>Graphic Design</h4></div>
      <div id="test1-content">
          <div class="accordion_child">
    
    			<center>
    				   <a href="gallery/large/HC_inc.jpg" rel="lightbox" title="Typography :: [HC] Graphic Design">
                            	<img src="js_gallery/thumb/HC_inc.jpg"></a>
    			<br>
    				   <a href="gallery/large/HC_ruins.jpg" rel="lightbox" title="Graphic Art :: [HC] Ruins'">
                            	<img src="js_gallery/thumb/HC_ruins.jpg"></a>
    			<br>
                               <a href="gallery/large/HC_rocky_mountain.jpg" rel="lightbox" title="Graphic Art :: [HC] Rocky Mountain">
                            	<img src="js_gallery/thumb/HC_rocky_mountain.jpg"></a>
    			<br>
                               <a href="gallery/large/coral_reef.jpg" rel="lightbox" title="Graphic Art :: Coral Reef">
                            	<img src="js_gallery/thumb/coral_reef.jpg"></a>
    
    			</center>
    
    	<br></br><br></br>
        	</div>
          </div>
    
      <div id="test2-header" class="accordion_headings" ><h4>Photography</h4></div>
      <div id="test2-content">
          <div class="accordion_child">
    
    			<center>
                               <a href="gallery/large/logan_yr1.jpg" rel="lightbox" title="Photography :: Logan">
                            	<img src="js_gallery/thumb/logan_yr1.jpg"></a>
    
    			</center>
    
    	<br></br><br></br>
        	</div>
          </div>
    
      <div id="test3-header" class="accordion_headings" ><h4>Web Design</h4></div>
      <div id="test3-content">
          <div class="accordion_child">
    
    			<center>
                               <a href="gallery/large/howtohotties.jpg" rel="lightbox" title="Photography :: Logan">
                            	<img src="js_gallery/thumb/howtohotties.jpg"></a>
    
    			</center>
    
    	<br></br><br></br>
        	</div>
          </div>
    
    <!---END OF JAVASCRIPT ACCORDION--->
    
    <br></br>
    To view our gallery click on one of the red category tabs (above). You must have Javascript enabled. If you don't have Javascript you may view our gallery <a href="gallery.html">here</a>.
    
    </div>
    
    		</div>
    	</div>
                
    	<div id="block_portfolio">
    	</div>
    
    </div>
    </div>
    
    	<div id="footer">
        		<div class="container">
            
            		<div class="footer_column long">
                		<h3>Hazardous Crew | Copyright 2009</h3>
                		<p>Layout by Collis Ta‚€™eed</p>
    			</div>
                
           	<div class="footer_column">
                	<h3>Quick Links</h3>
    			<ul>
                      <li><a href="index.html">Home</a></li>
               		<li><a href="contact.html">Contact</a></li>
                	</ul>
                </div>
    
                <div class="footer_column">
                	<h3>Affiliates</h3>
    			<ul>
                      <li><a href="http://vectortuts.com">TutsPlus</a></li>
                      <li><a href="http://spamtheweb.com">SpamTheWeb</a></li>
                      <li><a href="http://explosm.com">Explosm</a></li>
                	</ul>
                </div>
            
    	</div>
    </div>
    </body>
    </html>
    Last edited by EvanGeorge; 07-11-2009 at 11:13 PM.

  • #2
    Senior Coder Spudhead's Avatar
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    1,856
    Thanks
    8
    Thanked 110 Times in 109 Posts
    For a start, you've got two body tags in your new page.

    What is this "accordian" script? Where's it from? Is it supposed to be compatible with Prototype/Scriptaculous? Can we see your page live?


  •  

    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
    •