Problem by loading lightbox with ajax

Problem by loading lightbox with ajax

Content of File B is loaded by AJAX in File A. In the head of File A, there is the link for lightbox.js. The elements adressed to the lightbox are loaded with AJAX afterwards from the File B.

The problem: The lightbox isn't recognizing the loaded elements. Because I dont have much AJAX and jQuery experience, I don't understand most of the solutions I found on the web. Or I just can't use them right.

  • - File A contains lightbox.js
  • - File B contains the images for lightbox.js
  • - AJAX loads the images from File B into File A
  • - By click on the images,the lightbox code isn't working


File A
  1. <head>
  2.     <title>Batman</title>
  3.     <link rel="stylesheet" type="text/css" href="../css/batman.css" media="only screen" />
  4.     <link rel="stylesheet" type="text/css" href="../css/jquery.lightbox-0.5.css" media="screen" />
  5.    
  6.     <script language="Javascript" src="../js/ajax.js"></script>
  7.     <script type="text/javascript" src="../js/jquery.js"></script>
  8.     <script type="text/javascript" src="../js/jquery.lightbox-0.5.js"></script>
  9.     <script type="text/javascript" src="../js/batman.js"></script>
  10. </head>
  11. [...]

Through the selection by the option-tags, the images are loaded:

  1. [...]   
  2.       <form>
  3.          <select    name="batmantype" size="1" onchange="batmanFilter(this.value)">
  4.             <option value="" selected="selected">(Please select)</option>
  5.             <option value="batman">Batman</option>
  6.             <option value="robin">Robin</option>
  7.         </select>
  8.         <div id="batmanFilter">
  9. <!-- Between these div-tags, loaded by AJAX-->
  10. <button type="button" class="showinfo" name="loadinfo" value="<?php echo $filter0; ?>" onclick="batmanfunction(this.value)">Batman compare</button>
  11.         </div>
  12.     </form>
  13. <div class="infobatman" id="batmanEvaluate">
  14. <!-- Between these div-tags, lightbox images are inserted by AJAX -->
  15. </div>
  16. [...]

AJAX Code:
  1. [...]
  2. function batmanfunction(str)
  3. {
  4.     if (window.XMLHttpRequest)
  5.     {// code for IE7+, Firefox, Chrome, Opera, Safari
  6.         xmlhttp=new XMLHttpRequest();
  7.     }
  8.     else
  9.     {// code for IE6, IE5
  10.         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  11.     }
  12.     xmlhttp.onreadystatechange=function()
  13.     {
  14.         if (xmlhttp.readyState==4 && xmlhttp.status==200)
  15.         {
  16.             document.getElementById("batmanEvaluate").innerHTML=xmlhttp.responseText;
  17.         }
  18.     }
  19.     xmlhttp.open("GET","fileB.php?batValue="+str,true);
  20.     xmlhttp.send();
  21. }
  22. [...]

Datei B:
The image-variables are all loaded correctly. So don't worry about that. The preview images are loaded by ajax, but the lightbox isn't reacting.

  1.             [...]
  2.             <?php
  3.             if (!empty($image[10]))
  4.             {
  5.             ?>
  6.                             <a href="../img/screenshots/<?php echo $image[11];?>" title="<?php echo $image[12]; ?>" class="lightbox"><img src="../img/screenshots/<?php echo $image[10];?>" alt="<?php echo substr($image[11], 0, -4); ?>" /></a>
  7.             <?php
  8.             }
  9.             ?>
  10.             <?php
  11.             if (!empty($image[13]))
  12.             {
  13.             ?>
  14.                             <a href="../img/screenshots/<?php echo $image[14];?>" title="<?php echo $image[15]; ?>" class="lightbox"><img src="../img/screenshots/<?php echo $image[13];?>" alt="<?php echo substr($image[14], 0, -4); ?>" /></a>
  15.             <?php
  16.             }
  17.             ?>
  18.                                 <script type="text/javascript">
  19.                                     $(function() {
  20.                                         $('a.lightbox').lightBox();
  21.                                     });
  22.                                 </script>
  23.                             </div> <!-- end of gallery-->
  24.             [...]

I have already found many different aproaches and tried them out, but I couldn't implement them, so it works. Maybe the problem is caused by the asynchronic loading of AJAX and that's why lightbox isn't recognizing the images.

I hope you can help me there! A step by step instruction would be nice.

Greetings, Bruce