Thickbox not functioning when placed using AJAX

Question

First let me say that I learned scripting by myself so my approaches may be a bit weird.

I want to call images into a div using AJAX but with a thickbox tag so when the image thumb is clicked the big image is displayed using the Thickbox (jQuery).

Here is the example page: click here

OK, please click in the menue on "photo" and then open one of the images in the left menue, for example "dusk". The dusk image will be placed in the main box. Now I want to open the image using Thickbox when you click on it. But it doesn't work, it just opens the image in the same window.

However the Thickbox is working properly if I just add an image to the test2.php like this:

<a href="images/test1.jpg" class="thickbox" rel="gallery"><img id="images" src="images/test1.jpg" alt="Single Image" /></a>

Here's how my backend is structured. All needed js-files (jQuery, thickbox, etc) are intergrated into the test2.php

When one of the links in the photo menue is clicked an AJAX call is sent to getwork.php with the ID of the photo.

function createRequestObject()
{
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
    {
    ro = new ActiveXObject("Microsoft.XMLHTTP");
}
    else
    {
    ro = new XMLHttpRequest();
}
return ro;

}

var http = createRequestObject();

var katcheck;

function sndReq(req)
{

var req2 = req;

katcheck = req.slice(0, 1);

   if (katcheck == "k")
   {
   var katid = req2.slice(3,4);

   http.open('get', 'getkat.php?kat='+katid);
   http.send(null);
   http.onreadystatechange = handleResponse;
   }
   else
   {

   if(startcheck==true){ var param = req;
                            http.open('get', 'getwork.php?id='+param);
                            http.send(null);
                            http.onreadystatechange = handleResponse;}
   else{
     $('#videoleft')
      .animate(  {"left": "-800px"},
                600, 'easeInQuad',
                function(){

                            var param = req;
                            http.open('get', 'getwork.php?id='+param);
                            http.send(null);
                            http.onreadystatechange = handleResponse;
                          } // this is the callback function
             )
      .animate(
                {"top": "0px", "left": "800px"},
                { queue:true, duration:1},
                function(){$(this).hide();}
             );
   }
  }
 }



 function handleResponse()
 {
    if(http.readyState == 4)
                    {
                   var response = http.responseText;

      if (katcheck == "k")
      {

                document.getElementById("videomenue").innerHTML = response;
                $("#videomenue").animate({"top": "0px", "left": "0px"},{ queue:true, duration:1}).show(500);
                $('#videoleft').css('float', 'right');
      }
      else
      {
      document.getElementById("post").innerHTML = response;

      if(startcheck==true){ startcheck=false;}
      else
      {
        $('#videoleft').show().animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});
      }
      }
    }


  }

OK and now what happens in the getwork.php:

{
$imgecho = ('<div class="img"><a href="'.$src.'?height=300&width=300modal=true" class="thickbox" rel="gallery"><img src="'.$image.'" width="'.$width1.'" height="'.$heightpic.'" alt="'.$row['title'].'" style="border: solid 1px grey;" /></a></div>');
}
 echo ('<div class="titleBG"></div><p class="title">'.$row['title'].'</p>'.$imgecho.''); break;

I of course stripped it down to only the important part. The php file is working properly but somehow no of the applied tags needed for thickbox are working. I even added the ?height=300&width=300modal=true like advised on the Thickbox website but it isnt working. I can't explain it to myself and it's already bugging me for a long time.

I hope someone can help me. Thank you very much!

Answer 1

As most Lightbox clones, Thickbox initializes on load of the main document. It looks for all <a>elements that have the required class, and adds the necessary events to them. Elements introduced into the document later will not automatically turn into thickbox links.

You will have to run the Thickbox initialization command every time you introduce a new element, or find out how to initialize a specific element.

Answer 2

You need to call the tb_init method manually after setting up the content, for instance, after setting the innerHTML of #videomenue call this:

tb_init('#videomenue a.thickbox');

And after the #post call:

tb_init('#post a.thickbox');

Also: You are jumping through a ton of unnecessary hoops since you are already using jQuery. For instance, here was a fast rewrite of all the code you posted, using just jQuery. If you have made the decision to use jQuery, try to use as much of it as possible to clean up your code (as a general practice):

function sndReq(req){
  var req2 = req,
  katcheck = req.slice(0, 1);

  var handleResponse = function(data){
    if(data){
      if(katcheck == "k"){
        $("#videomenue")
          .html( data )
          .animate({"top": "0px", "left": "0px"},{ queue:true, duration:1}).show(500);
        tb_init('#videomenue a.thickbox');
        $('#videoleft').css('float', 'right');
      } else {
        $("#post").html( data );
        tb_init('#post a.thickbox');
        if(startcheck == true){ 
          startcheck = false;
        } else {
          $('#videoleft').show().animate({"top": "0px", "left":"0px"},{ queue:true, duration:800,  easing: 'easeOutBack'});
        }
      }
    }
  }

  if( katcheck == "k" ){
    var katid = req2.slice(3,4);
    $.get('getwork.php', { kat: katid }, handleResponse );
  } else {
    var param = req;
    if( startcheck == true ){
      $.get('getwork.php', { id: param }, handleResponse );
    } else {
      $('#videoleft')
        .animate( {"left": "-800px"}, 600, 'easeInQuad',
            function(){ $.get('getwork.php', { id: param }, handleResponse ); })
        .animate( {"top": "0px", "left": "800px"}, {queue:true, duration:1},
            function(){ $(this).hide(); });
    }
  }
}