[英]Fancybox inside Ajax content
I use ajax to present content on my website. 我使用ajax在我的网站上展示内容。 When clicking in menu it opens stuff inside #content div. 在菜单中单击时,它将在#content div中打开内容。 Here is my ajax code. 这是我的ajax代码。
$(document).ready(function() {
$('.menu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').animate({"width": "0px"},'normal',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent());
}
function showNewContent() {
$('#content').animate({"width": "0px"},'fast');
$('#content').animate({"width": "664px"},'fast');
}
return false;
});
});
I want to use Fancybox lightbox effect (http://fancybox.net) inside my ajax content. 我想在我的Ajax内容中使用Fancybox灯箱效果(http://fancybox.net)。 Below is code needed normally for Fancybox. 以下是Fancybox通常所需的代码。
<script type="text/javascript" src="js/fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
});
});
</script>
How can I get this working? 我该如何工作? Ajax call? 阿贾克斯打电话吗?
First this line is wrong 首先这行是错的
$('#content').load(toLoad,'',showNewContent());
It is saying call showNewContent()
and assign whatever it returns to this event. 就是说调用showNewContent()
并将返回的任何东西分配给该事件。
It should be 它应该是
$('#content').load(toLoad,'',showNewContent);
Now it says to assign a reference to this function and run it when it is needed. 现在,它表示分配对此功能的引用并在需要时运行它。
Now to answer your question, you need to call $("a#example4").fancybox({...});
现在回答您的问题,您需要调用$("a#example4").fancybox({...});
after the content is loaded, so that means you would put it in the function showNewContent
. 加载内容后,这意味着您可以将其放入函数showNewContent
。
In the load
callback handler should be a function pointer showNewContent()
will right away call the function. 在load
回调处理程序中,应该有一个函数指针showNewContent()
将立即调用该函数。 Try this. 尝试这个。
$(document).ready(function() {
$('.menu li a').click(function(){
var toLoad = $(this).attr('href')+' #content';
$('#content').animate({"width": "0px"},'normal',loadContent);
window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-5);
function loadContent() {
$('#content').load(toLoad,'',showNewContent);
}
function showNewContent() {
$("#example4").fancybox({
'opacity' : true,
'overlayShow' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
});
}
return false;
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.