jquery lightbox plugin while images are loaded via ajax

Question

I have a page where I am loading bunch of images initially when the page loads. These images are tied to the lightbox plugin and when i click on the images..the plugin does do what it is supposed to. However, I have some ajax added via jquery (triggered by a drop down box) which updates the list of images based on what it gets from the server. After the list of images is reloaded the lightbox plugin does not seem to work anymore.

Does anyone know if something special needs to be done?

Following is the code in my html page (this works):

<div id="gallery">
    <ul id="imagesall">    
       <li>    
         <a title="" href="/catalogFiles/cfil837.jpg">    
          <img height="72" width="72" alt="" src="/catalogFiles/cfil838.jpg"/>    
         </a>    
        </li>
        <li>
         <a title="" href="photos/image2.jpg">
          <img height="72" width="72" alt="" src="/catalogFiles/cfil840.jpg"/>
         </a>
         </li>    
    </ul>
</div>

and following is the jquery ajax functionality. Thanks to seth (now i wish SO had mention functionality like twitter :)

jQuery(function(){
  jQuery("select#rooms").change(function(){
    var options = '';
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), ajax: isAjax},
function(j){
      for (var i = 0; i < j.length; i++) {
 var ul = jQuery('ul#imagesall').empty();
 var images = j[i].images.split(',');
        jQuery.each( images , function(idx, img ) {
ul.append('<li><a title="test" href="/catalogFiles/'+img+'.jpg"><img alt="" src="/catalogFiles/' + img + '.jpg" height="72" width="72"/></a></li>');
        })
          }
        })
      })
    })

Answer 1

Most jQuery lightbox plugins scan the page and insert their functionality at the page load event (or rather, the jQuery document ready event). This functionality modifies the DOM to allow the cool lightbox effect to appear. However, these changes are overwritten by your AJAX call.

My suggestion would be to dive into the lightbox source and find the function that performs the work on your DOM, and call it after your ajax request comes back successfully.