View Full Version : Lightbox Isn't working

07-28-2010, 08:08 PM
Hi for some reason my lightbox, downloaded from (huddletogether/projects - Lightbox 2) isn't working. I have a javascript slider that IS working on the page aswell

You can view a test page here

(only the first thumbnail is clickable)

I have attached some code below, please let me know if you need to see any more,

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Patrick Edward Diamonds</title>

<link rel="stylesheet" href="CSS/style.css" type="text/css" />
<link rel="stylesheet" href="CSS/screen.css" type="text/css" media="screen" /><br />
<link rel="stylesheet" href="CSS/lightbox.css" type="text/css" media="screen" />

<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<style type="text/css">
body {
background-image: url(img/MainBG.gif);
background-repeat: repeat;
a:link {
color: #999;
text-decoration: none;
a:visited {
text-decoration: none;
color: #999;
a:hover {
text-decoration: none;
color: #000;
a:active {
text-decoration: none;


<div id="container">
<div id = "header">
<div class = "logo">
<a href="index.html">
<img src="img/logo.png" alt ="Patrick Edward Diamonds" />

<ul id="nav">
<li><a href="index.html"> Home |</a></li>
<li><a href="collections.html"> Collections |</a></li>
<li><a href="design.html"> Design Service |</a></li>
<li><a href="trade.html"> Trade Service |</a></li>
<li><a href="gallery.html"> Design Gallery |</a></li>
<li><a href="contact.html"> Contact Us</a></li>

</div> <!--end of header-->

<div class="main_view">
<div class="window">
<div class="image_reel">
<a href="#"><img src="img/reel_1.jpg" alt="" /></a>
<a href="#"><img src="img/reel_2.jpg" alt="" width="780" height="245" /></a>
<a href="#"><img src="img/reel_3.jpg" alt="" /></a>
<a href="#"><img src="img/reel_4.jpg" alt="" /></a>
<div class="paging">
<a href="#" rel="1"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="2"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="3"><img src="img/bullet.png" alt="" /></a>
<a href="#" rel="4"><img src="img/bullet.png" alt="" /></a>
</div> <!--end of banner-->

<div id="main1">
<p><img src="img/gallery.png" alt="Gallery" /></p>
<div class="album">
<div class="imageSingle">
<div class="image"><a href="img/Lgallery1.jpg" rel="lightbox" title="my caption"><img src="img/gallery1.jpg"/></a></div>


07-28-2010, 09:09 PM
You do realize the first image is the only one wrapped with an anchor tag, right?

07-28-2010, 10:42 PM
Yes i do, ive only added one link in to try and get the lightbox to work..do you have any ideas why its not working?

07-28-2010, 10:50 PM
I guess I misunderstood. I thought part of your problem was that only one image is clickable.

Firebug reports a javascript error:

element.dispatchEvent is not a function
Line 3972
A javascript error will often shut down the rest of the javascript on the page. And since this is prototype that's broken, none of the other stuff will work since it all depends on prototype.

Oh, look. You also have jquery on the page. You're likely seeing the results of crashing javascript libraries (one clobbering the other). Since you're using jquery already, look around for a jquery lightbox.