2012-03-21 85 views
0

這個問題一直纏着我了幾天現在能真正做到與你的輸入工作...jQuery的facebox不與動態駕駛Ajaxtabs

我使用http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.htm創建我的網站Ajax選項卡以及使用用於模態窗口的http://defunkt.io/facebox/。但是當我嘗試通過ajax選項卡加載facebox鏈接時,它不會將內容加載到facebox中。但它對ajax選項卡之外的任何鏈接都能正常工作(即,在站點加載時直接使用PHP進行加載)。

有什麼想法?請需要利用這樣的服務來完成我的網站......

謝謝大家提前

喬治

下面是我facebox jQuery代碼:

enter code here 

<script> 
jQuery(document).ready(function($) { 
$('.embed-thumbnail').click(function(event) { 
event.preventDefault(); 
$.facebox($(this).parent().find('.embed-content')[0].innerHTML) 
}); 
$.facebox.settings.loadingImage = '../static/img/loading.gif' 
$.facebox.settings.closeImage = '../static/img/closelabel.png' 
$.facebox.settings.opacity = 1 
$.facebox.settings.faceboxHtml = '\ 
<div id="facebox" style="display:none;"> \ 
<div class="popup"> \ 
<div class="content"> \ 
</div> \ 
<a href="#" class="close"><img src="../static/img/closelabel.png" title="close" class="close_image" /></a> \ 
</div> \ 
</div>' 
}); 
</script> 

Ajaxtab代碼:

<script type="text/javascript"> 
var countries=new ddajaxtabs("popularPosts", "populardivcontainer") 
countries.setpersist(true) 
countries.setselectedClassTarget("linkparent") //"link" or "linkparent" 
countries.init() 
</script> 

回答

0

好吧,看起來您需要重新綁定Facebox已加載Ajax。

於是用Ajax選項卡,使用:

instance.onajaxpageload=function(pageurl){ 
//custom code here 
} 

和:

,將其固定的onLoad

雖然呼籲任何錨標記facebox()就可以了,這是 更容易讓你的臉鏈接一個rel =「facebox」,並打到他們全部 onLoad。

jQuery(document).ready(function($) { 
$('a[rel*=facebox]').facebox() 
}) 

所以,你應該結束了,像這樣:

instance.onajaxpageload=function(pageurl){ 
$('a[rel*=facebox]').facebox() 
} 

顯然與標籤對象替換「實例」 - 這應該重新綁定新加載Facebox元素的代碼。

文檔沒有說明的一件事是,.onajaxpageload方法一旦完成加載Ajax內容,因爲這是您想要的(而不是期間或之前)。

編輯:

新腳本嘗試。

<script type="text/javascript"> 
    var countries=new ddajaxtabs("popularPosts", "populardivcontainer") 
    countries.setpersist(true) 
    countries.setselectedClassTarget("linkparent") //"link" or "linkparent" 
    countries.init() 

$(document).ready(function() { 
    loadFacebox(); 

    countries.onajaxload=function(pageurl) { 
    loadFacebox(); 
    }; 
}); 

function loadFacebox() { 
    $('.embed-thumbnail').click(function(event) { 
event.preventDefault(); 
$.facebox($(this).parent().find('.embed-content')[0].innerHTML) 
}); 
$.facebox.settings.loadingImage = '../static/img/loading.gif' 
$.facebox.settings.closeImage = '../static/img/closelabel.png' 
$.facebox.settings.opacity = 1 
$.facebox.settings.faceboxHtml = '\ 
<div id="facebox" style="display:none;"> \ 
<div class="popup"> \ 
<div class="content"> \ 
</div> \ 
<a href="#" class="close"><img src="../static/img/closelabel.png" title="close" class="close_image" /></a> \ 
</div> \ 
</div>' 
}; 
</script> 

或者類似的東西...你可能需要一個更狡猾的方式來找到您facebox元素 - 但是每一個標籤加載時間後,應該重新綁定相同的代碼。

+0

另外,如果你使用的標籤不工作,你總是可以檢查出jQuery UI標籤:http://jqueryui.com/demos/tabs/#ajax – RemarkLima 2012-03-21 08:36:57

+0

謝謝你的答案...我可以問一下有關更多關於在哪裏放置代碼的指導?我將編輯原始文章並在我的網站上添加我的facebox jquery代碼 – user946742 2012-03-24 08:44:13

+0

'.onajaxpageload'用於ajax選項卡。如果您可以發佈該代碼,那也不錯。您需要在加載它們時將選項卡分配給變量,如您在此給出的示例所示:http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ajaxtabs_suppliment3.htm - 即'countries.onajaxpageload = .. 。「這將全部放在頁面頂部的腳本標記中,照常進行。 – RemarkLima 2012-03-25 09:50:46