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內容

回答

相關問題