Я делаю небольшой сайт, используя ajax, в основном из любопытства.
Я не хочу использовать Fancybox для отображения изображений в формате ajax.
То, что я сейчас делаю, очень просто, у меня есть главная html-страница, а гиперссылки просто меняют содержимое одного div ... например:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
<link rel="stylesheet" href="jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
</head>
<body>
<div>
<a href="javascript:void(0)" onclick="xml_doc('ajax', 'ajax.html')"> test </a>
</div>
<div id="ajax">
</div>
</body>
</html>
и базовый код js:
function xml_obj()
{
var xmlhttp;
// IE7+, Firefox, Chrome, Opera, Safari
if (window.XMLHttpRequest)
return new XMLHttpRequest();
// IE6, IE5
else
return new ActiveXObject("Microsoft.XMLHTTP");
}
function xml_cfunc(div, xmlhttp)
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
div.innerHTML=xmlhttp.responseText;
}
function xml_doc(id, url)
{
var xmlhttp = xml_obj();
var div = document.getElementById(id);
xmlhttp.onreadystatechange = function()
{
xml_cfunc(div, xmlhttp);
};
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
содержимое файла ajax.html будет содержать одну ссылку, например:
<a id="single_image" href="image.png"><img src="thumb.png" alt=""/></a>
Теперь я должен поместить вызов fancybox куда-нибудь:
$('a#single_image').fancybox();
Но я просто не могу узнать, где ... Если я добавлю его в html-контент, он не будет оцениваться.
Поэтому, когда я нажимаю на миниатюру, она просто отправляет меня в полноразмерное изображение (с Uncaught TypeError: Невозможно вызвать метод 'appendChild' из undefined, а Resource интерпретируется как документ, но передается с изображением MIME type / png.) .
Все мои исследования закончились противоположной проблемой (вызывайте контент ajax в fancybox).
Теперь мои вопросы:
- Это правильный способ использования ajax?
- Как мне сделать так, чтобы содержимое ajax могло содержать ссылки Fancybox?
Большое спасибо,
Pierre-Luc