Question

首先让我说我自己学习了脚本，所以我的方法可能有点奇怪。

我想使用AJAX将图像调用到div中，但是使用厚盒标记，因此当单击图像缩略图时，使用Thickbox（jQuery）显示大图像。

以下是示例页面：click here

好的，请点击“照片”上的菜单，然后打开左侧菜单中的一张图片，例如“黄昏”。黄昏图像将放在主框中。现在我想点击它时使用Thickbox打开图像。但它不起作用，它只是在同一窗口中打开图像。

但是，如果我只是将图像添加到test2.php，那么Thickbox工作正常：

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

以下是我的后端的结构。所有需要的js文件（jQuery，thickbox等）都集成到test2.php

中

当点击照片菜单中的一个链接时，会向带有照片ID的getwork.php发送一个AJAX调用。

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'});
      }
      }
    }


  }

好了，现在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;

我当然把它剥离到了重要的部分。 php文件工作正常，但不知道胖盒所需的应用标签是否正常工作。我甚至在Thickbox网站上添加了?height=300&width=300modal=true之类的建议，但它不起作用。我无法向自己解释，这已经困扰了我很久了。

我希望有人可以帮助我。非常感谢你！

Answer 1

您需要在设置内容后手动调用tb_init方法，例如，在设置innerHTML #videomenue之后调用此方法：

tb_init('#videomenue a.thickbox');

在#post电话之后：

tb_init('#post a.thickbox');

另外：由于您已经在使用jQuery，因此您正在跳过大量不必要的箍。例如，这里只使用jQuery快速重写您发布的所有代码。如果您已决定使用jQuery，请尝试尽可能多地使用jQuery来清理代码（作为一般做法）：

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(); });
    }
  }
}

Answer 2

与大多数Lightbox克隆一样，Thickbox在主文档的load上初始化。它查找具有所需类的所有<a>元素，并向其添加必要的事件。稍后在文档中引入的元素将不自动转换为thickbox链接。

每次引入新元素时都必须运行Thickbox初始化命令，或者了解如何初始化特定元素。

使用AJAX放置时，Thickbox无法正常工作

2 个答案: