EvanGeorge
07-11-2009, 11:09 PM
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...
<!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...
<!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>
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...
<!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...
<!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>