2

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

我想使用 AJAX 将图像调用到一个 div 中，但带有一个厚框标签，因此当单击图像拇指时，使用厚框（jQuery）显示大图像。

这是示例页面：单击此处

好的，请点击菜单中的“照片”，然后打开左侧菜单中的一张图片，例如“黄昏”。黄昏图像将放置在主框中。现在我想在你点击它时使用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

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

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在Thickbox网站上添加了类似的建议，但它不起作用。我无法向自己解释它，它已经困扰了我很长时间。

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

4

2 回答 2

3

您需要tb_init在设置好内容后手动调用该方法，例如设置innerHTMLof #videomenuecall this 后：

tb_init('#videomenue a.thickbox');

通话后#post：

tb_init('#post a.thickbox');

另外：由于您已经在使用 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(); });
    }
  }
}
于 2010-02-11T15:23:09.193 回答
2

与大多数 Lightbox 克隆一样，Thickbox 初始化load主文档。它查找<a>具有所需类的所有元素，并向它们添加必要的事件。稍后引入到文档中的元素不会自动变成厚框链接。

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

于 2010-02-11T15:16:54.797 回答