CODEWITHSUNDEEP
javascriptjqueryasp.net.netlightbox
Lars Holdgaard
Lars Holdgaard

Reputation: 9966

LightBox won't open - Probably some JavaScript mistake

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">

Upvotes: 1

Views: 1246

Answers (2)

Timothy Groote
Timothy Groote

Reputation: 8643

from what i can tell in this help page, your lightbox shouldn't work with jQuery, but should work with Prototype.js and Scriptaculous

If you are going to use Jquery and prototype at the same time, one of them will have to run in no-conflict mode, or neither will work properly. You can do this, by loading jQuery first, then running

jQuery.noConflict()

(read the skinny on noConflict here)

and then loading prototype and scriptaculous.

You can then still call jQuery, but no longer by using $(), ($() will invoke prototype.js), but by using jQuery();

Upvotes: 1

Aristos
Aristos

Reputation: 66641

You have conflict, the jQuery with the Prototype. Ether remove jQuery if you not use it, ether set compatibility mode for one of the two. Eg, for jQuery you can set the noConflict() and then call it using the jQuery parametre.

<script src="prototype.js"></script>
<script src="jquery.js"></script>
<script>
 jQuery.noConflict();

 // Use jQuery via jQuery(...)
 jQuery(document).ready(function(){
   jQuery("div").hide();
 });

 // Use Prototype with $(...), etc.
 $('someid').hide();
</script>

Using jQuery with Other Libraries : http://docs.jquery.com/Using_jQuery_with_Other_Libraries

Upvotes: 1

Related Questions