I've been trying to implement LightBox. I've been trying to follow the "official" guide and searching on the net - without any luck at all.
The problem is as follows: When I click the image, it just opens as it was a normal link. It doesn't register I've clicked on it. I also tried to follow this:
If the solution need some kind of tracking in the jQuery code, please add a small note on how to do the tracking :)
Currently I have the following rendered code (using ASP.NET):
The image itself:
<a id="ContentPlaceHolder1_ContentPlaceHolder1_MainImageLink" rel="lightbox" href="../../../Media/ProductImages/KaninbamseKnirke1.jpg">
<img id="ContentPlaceHolder1_ContentPlaceHolder1_MainImage" title="Kanin bamse Knirke" class="ProductImage" src="../../../Media/ProductImages/KaninbamseKnirke1.jpg" alt="Kanin bamse Knirke" style="height:280px;width:280px;" />
</a>
My head tag (and yes - the paths work):
<link rel="stylesheet" href="../../../Styles/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>
<link href="../../../Styles/StyleSheet.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
My body tag:
As I have the problem described above, I've tryed both with this active and not. The initLightBox is the method I've set to fire onload, as described on the Lightbox homepage.
<body id="Masterbackground" onload="initLightbox();" class="badeandnav">
For what is it worth - my doctype
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">