2012-03-14 50 views
0

我工作的學校項目在Visual Studio 2010這是應該的Javascript打印拇指在的fancybox時點擊它們

我試圖做一個網頁有許多像拇指打開。當我點擊其中一個拇指時,我希望它們出現在fancybox中。事情是,客戶端應該能夠上傳更多圖片。所以我想我會讓我的javascript用數組打印拇指和圖像。

這是加載在<a>圖像中的JavaScript:

var divbilder; 
var bildenavn = ["img/Media/3.jpg", "img/Media/4.jpg"]; 
var bildethumb = ["<img src='img/Media/3_thumb.jpg' alt='' />", "<img src='img/Media/4_thumb.jpg' alt='' />"]; 

window.onload = init; 

function init() { 

divBilder = document.getElementById("divBilder"); 
genererBilder(); 
} 

function genererBilder() { 
for (var i = 0; i < bildenavn.length; i++) { 
    var nyttBilde = document.createElement("a"); 
    nyttBilde.className = "grouped_elements"; 
    nyttBilde.rel="group1"; 
    nyttBilde.href = bildenavn[i]; 
    nyttBilde.innerHTML = bildethumb[i]; 
    divBilder.appendChild(nyttBilde); 
} 
} 

到目前爲止好,圖像是完全加載到我的網站。

但是他們不會出現在fancyBox當我點擊它們,我得到的圖像在一個空白頁。

這裏是我的fancybox代碼:

$(document).ready(function() { 
    $("a.grouped_elements").fancybox(); 

}); 

不過,我曾嘗試把這個代碼: <a class="grouped_elements" rel="group1" href="img/Media/3.jpg"><img src="img/Media/3_thumb.jpg" alt=""/></a> 到我的HTML。然後fancybox完美地運作。

換句話說,我擁有head-tag等所需的所有fancyBox文件。

您可能需要的其他注意事項:當我在Chrome中檢查元素時,我的javascript使得代碼行與手動放入我的html中的代碼行完全相同。當然在<a>裏面有不同的href和src。

我使用ASP.net c#與MasterPage。

任何幫助,在大家的讚賞,我有點新的jQuery的和JavaScript這樣善待:)

回答

0

我能想到出現這種情況的唯一原因是因爲你使用的fancybox v1.3.x.

如果以上內容是正確的,fancybox v1.3.x不支持動態添加元素,這就是爲什麼你的硬編碼鏈接只能工作,而不是你的js生成的。

我使用jQuery .on()方法,你可以find here

您可能需要調整代碼以符合像

$("#divBilder").on("focusin", function(){ .... 
+0

非常感謝您JFK自己寫的結構解決方法!解決問題的幾個小時,我只需要將fancyBox更新到最新版本即可。不敢相信我還沒有那樣做。反正我會給你點,但我沒有任何代表。我一定會給你一個餅乾,你:) – Ringziii 2012-03-15 10:21:56

相關問題