AJAX를 사용하여 배치했을 때 두꺼운 상자가 작동하지 않음

Question

먼저 내 접근 방식이 약간 이상 할 수 있으므로 직접 스크립팅을 배웠다고 해봅시다.

AJAX를 사용하지만 divbox 태그를 사용하여 이미지를 div로 호출하려면 이미지 썸을 클릭하면 큰 이미지가 Thickbox (jQuery)를 사용하여 표시됩니다. 여기

이 예제 페이지입니다 : click here

OK "사진"에 ​​MENUE 클릭하십시오 다음 예 "황혼"에 대한, 왼쪽 MENUE의 이미지 중 하나를 엽니 다. 황혼 이미지가 주 상자에 배치됩니다. 이제 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에 통합됩니다.

사진 메뉴의 링크 중 하나를 클릭하면 AJAX 호출이 사진의 ID와 함께 getwork.php로 전송됩니다 .

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

지금 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에 필요한 적용된 태그가 작동하지 않습니다. 심지어 Thickbox 웹 사이트에 조언 된 것과 같은 ?height=300&width=300modal=true을 추가했지만 작동하지 않습니다. 나는 그것을 나 자신에게 설명 할 수 없다. 그리고 그것은 벌써 나를 오랫동안 괴롭 히고있다.

누군가가 나를 도울 수 있기를 바랍니다. 고마워요!

Answer 1

당신은 innerHTML#videomenue의 전화를 설정 한 후, 예를 들어, 컨텐츠를 설정 한 후 수동으로 tb_init 메소드를 호출하기 위해 필요한이 :

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

Answer 2

대부분의 라이트 박스 클론처럼 Thickbox는 주 문서의 load에서 초기화됩니다. 필요한 클래스가있는 모든 <a> 요소를 찾고 필요한 이벤트를 추가합니다. 나중에 문서에 도입 된 요소는 이 아니며은 자동으로 thickbox 링크가됩니다.

새 요소를 추가 할 때마다 Thickbox 초기화 명령을 실행하거나 특정 요소를 초기화하는 방법을 찾아야합니다.