먼저 내 접근 방식이 약간 이상 할 수 있으므로 직접 스크립팅을 배웠다고 해봅시다.AJAX를 사용하여 배치했을 때 두꺼운 상자가 작동하지 않음
AJAX를 사용하지만 divbox 태그를 사용하여 이미지를 div로 호출하려면 이미지 썸을 클릭하면 큰 이미지가 Thickbox (jQuery)를 사용하여 표시됩니다. 여기
이 예제 페이지입니다 : click hereOK "사진"에 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
을 추가했지만 작동하지 않습니다. 나는 그것을 나 자신에게 설명 할 수 없다. 그리고 그것은 벌써 나를 오랫동안 괴롭 히고있다.
누군가가 나를 도울 수 있기를 바랍니다. 고마워요!
와우! 정말 고맙습니다! 그것은 (하나의 작은 수정 후) 작동합니다! 같은 디렉토리에있는 test3.php 페이지에서 원한다면 그것을 볼 수 있습니다! 나는 jQuery가 필요한 것을 할 수 있다는 것을 알고있다. 나는 AJAX를 해결하는 방법을 알지 못했기 때문에 데이터를 얻기 위해 나의 오래된 AJAX 코드를 유지했다. 이제 코드를 이해하려고 노력할 것입니다. 감사! – Cletus
@Pekka Thickbox가 자신의 init을 호출 할 때,이 호출은'tb_init ('a.thickbox, area.thickbox, input.thickbox')'어디서 볼 것인지 알려줍니다. 다시 그것을 호출하고 'html'이 완전히 대체 된 요소로 검색 범위를 지정하면 아무런 문제가 없어야합니다. –
@ Anti-Depressiva 다행 이네, 너의 프로젝트에 도움이 될거야! –