Home/ Questions/Q 7438413
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-29T10:33:04+00:00

I’ve been trying to implement LightBox . I’ve been trying to follow the official

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0