Javascript Lightbox作爲分佈式代碼片段的一部分

我一直負責創建將分發到多個網站以包含在其HTML中的代碼片段。此代碼片段將呈現一個按鈕，按下該按鈕將啓動包含來自中央網站的內容的iframe的lightbox。Javascript Lightbox作爲分佈式代碼片段的一部分

我的想法是將jQuery與Lightbox插件（例如colorbox）一起使用，但包含此代碼段的網站可能具有舊版本（或更新版本）的jQuery或已包含的不同框架，這很可能會導致問題。

我的問題是;如何將jQuery包含在網站中，而不會干擾其他版本的jQuery或其他框架？

此外，這是甚至是最好的方法來解決這個問題嗎？有沒有使用框架的Javascript燈箱？

任何幫助將不勝感激！

2011-09-29 dSquared

那麼，一般來說，添加多個js庫到頁面會傷害性能。這也適用於添加多個版本的庫。在每個頁面上加載JQuery（和其他庫）都必須運行不少測試，才能知道運行哪個代碼段（以及每個版本）。大多數情況下，您不會注意到它，但添加第二個庫後可能會成爲問題。

也就是說，運行jQuery的多個版本很容易。設置新版本的jQuery爲noconflict模式，同時給它一個不同的名稱（jquery讓我們把它的$重命名爲任何你想要的），如$j2或其他（只要確保它是兼容的東西）。另外，我相信它必須在舊版本之前加入，以免在進入noconflict模式之前發生衝突。然後，你把此行中的腳本標記你已經包括了新的jQuery代碼後：

<script type='text/javascript'> 
    var $j2 = jQuery.noConflict(); 
</script>

你會正常加載的jQuery的第二個版本。你的新的jQuery的任何後續調用看起來是這樣的：

$j2("myDiv")

就個人而言，我是顏色框的大風扇。我覺得這是目前最好的。它速度快，多功能，可重新摺疊。因此，與同時更改jQuery的名稱和顏色框名的功能，你可以撥打電話，以彩盒這個樣子：

$ourBiz.fantasyBox({settings:etc});

當然，如果你的客戶不看代碼？他們不會注意到它，但它看起來很酷，呃？我會首先嚐試一下，你可能會發現第二個庫的性能下降甚至都不明顯。

如果您注意到性能損失，你可能想嘗試的其中之一：

Lightbox JS - 原來的燈箱之一。請注意，有一個燈箱2來自同一作者，但這種使用原型& Scriptaculous的
HighSlide
Floatbox
TinyBox - 這個人是不是很通用的大多數，但它的速度快，因此對於單個圖像的彈出窗口或內聯內容，它是一個不錯的選擇

來源

2011-09-30 08:14:12 Donamite

很好的回答;謝謝！我用原始的JS + TinyBox解決了這個問題，因爲我不能訪問這個網站，以確保第一個jQuery沒有衝突。 – dSquared

只包括jQuery和使用noConflict()方法。 Example

<script src="http://code.jquery.com/jquery-1.4.4.min.js"></script> 
<script src="http://leandrovieira.com/projects/jquery/lightbox/js/jquery.lightbox-0.5.pack.js"></script> 
<link rel="stylesheet" href="http://leandrovieira.com/projects/jquery/lightbox/css/jquery.lightbox-0.5.css"> 

<script> 
jQuery.noConflict()(function($){ 
    $('a').lightBox(); 
}); 
</script>

如果客戶端請求的優化以及那是另一回事。

來源

2011-10-02 00:39:16 William

Javascript Lightbox作爲分佈式代碼片段的一部分

回答

相關問題