...

View Full Version : Lightbox Isn't working



spmcreative
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
http://www.spmcreative.co.uk/patrickedward/gallery.html

(only the first thumbnail is clickable)

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



<head>
<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;
border:0;
}
a:visited {
text-decoration: none;
color: #999;
border:0;
}
a:hover {
text-decoration: none;
color: #000;
border:0;
}
a:active {
text-decoration: none;
border:0;
}
</style>
</head>


<body>

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

<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>
</ul>

</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>
</div>
<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>
</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>
</div>

Thanks,
Simon

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

spmcreative
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?

tomws
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
http://www.spmcreative.co.uk/patrickedward/js/prototype.js
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum