Thickbox не работает при использовании AJAX - PullRequest
Новая
       23

Thickbox не работает при использовании AJAX

2 голосов
/ 11 февраля 2010

Сначала позвольте мне сказать, что я изучил сценарии самостоятельно, поэтому мои подходы могут быть немного странными.

Я хочу вызывать изображения в div, используя AJAX, но с тегом Thickbox, поэтому при нажатии большого пальца изображения большое изображение отображается с помощью Thickbox (jQuery).

Вот пример страницы: нажмите здесь

ОК, пожалуйста, нажмите в меню «фото», а затем откройте одно из изображений в левом меню, например, «Сумерки». Сумерки изображения будут размещены в главном окне. Теперь я хочу открыть изображение с помощью Thickbox при нажатии на него. Но это не работает, оно просто открывает изображение в том же окне.

Однако Thickbox работает нормально, если я просто добавляю изображение в test2.php следующим образом: 

<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 с идентификатором фотографии. 

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, но он не работает. Я не могу объяснить это самому себе, и это уже давно беспокоит меня.

Я надеюсь, что кто-то может мне помочь. Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 11 февраля 2010

Вам нужно вызвать метод tb_init вручную после настройки содержимого, например, после установки innerHTML из #videomenue, вызвать это: 

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(); });
    }
  }
}
2 голосов
/ 11 февраля 2010

Как и большинство клонов Lightbox, Thickbox инициализируется на load основного документа. Он ищет все элементы <a>, которые имеют требуемый класс, и добавляет к ним необходимые события. Элементы, введенные в документ позже, , а не автоматически превращаются в ссылки в виде «толстого ящика».

Вам придется запускать команду инициализации Thickbox каждый раз, когда вы вводите новый элемент, или узнаете, как инициализировать конкретный элемент.

...