Fancybox里面的Ajax内容

我使用ajax在我的网站上呈现内容。当在菜单中点击时，它会在#content div内打开内容。这是我的ajax代码。Fancybox里面的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; 
    }); 
});

我想在我的ajax内容中使用Fancybox lightbox效果（http://fancybox.net）。以下是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>

我该如何得到这个工作？ Ajax调用？

来源

2011-08-29 Aleksi

在load回调处理函数应该是函数指针showNewContent()会马上调用该函数。尝试这个。

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

来源

2011-08-29 12:07:01 ShankarSangoli

谢谢，这似乎是非常接近。 Fancybox脚本似乎正在工作，但它不加载图像。它总是给我提示错误信息“请求的内容无法加载”。这是什么东西给予更大的形象：'' – Aleksi

试试我编辑的答案。 – ShankarSangoli

男人！这很好，很大的帮助！ – Aleksi

首先这条线是错误的

$('#content').load(toLoad,'',showNewContent());

跟它通话showNewContent()并指派不管它返回到这个事件。

应该

$('#content').load(toLoad,'',showNewContent);

现在它说，分配给此函数的引用并运行它在需要时。

现在要回答你的问题，你需要在加载内容后调用$("a#example4").fancybox({...});，这意味着你可以将它放在函数showNewContent中。

来源

2011-08-29 12:03:17 epascarello

Fancybox里面的Ajax内容

回答

相关问题