Javascript Lightbox作为分布式代码片段的一部分

Question

我的任务是创建一个代码片段，将分发到多个网站，包括在他们的HTML。这段代码将呈现一个按钮，当按下该按钮时，将启动一个lightbox，其中包含一个带有来自中央网站的内容的iframe。

我的想法是使用带有Lightbox插件的jQuery (例如colorbox)，但是包含此代码片段的网站可能有一个较旧(或较新)版本的jQuery，或者已经包含了一个不同的框架，这很可能会导致问题。

我的问题是:如何才能以不干扰其他版本的jQuery或其他框架的方式在网站中包含jQuery？

另外，这是最好的解决方法吗？有没有不使用框架的Javascript Lightbox？

任何帮助都将不胜感激！

Answer 1

一般来说，在一个页面中添加多个js库会影响性能。这也适用于添加一个以上版本的库。在每个页面上，load JQuery (和其他库)必须运行相当多的测试，以便知道要运行它自己的代码的哪一部分(以及针对每个版本)。大多数时候你不会注意到它，但是在添加第二个库之后，它可能会成为一个问题。

也就是说，运行多个版本的jQuery是很容易的。将较新版本的jQuery设置为无冲突模式，同时给它一个不同的名称(jquery让您将它的$重命名为您想要的任何名称)，例如$j2或其他任何名称(只需确保它是兼容的)。此外，我认为它必须包含在旧版本之前，以便在进入无冲突模式之前不会发生冲突。然后，在包含较新的jquery代码后，立即将该行放入脚本标记中：

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

您可以正常加载第二个版本的jQuery。对较新的jQuery的任何后续调用都将类似于：

$j2("myDiv") 

就我个人而言，我是colorbox的铁杆粉丝。我觉得现在是最好的。它速度快、用途广、可重塑品牌。因此，如果能够同时更改jQuery名称和colorbox名称，则可以对colorbox进行如下调用：

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

当然，如果你的客户不看代码，他们就不会注意到它，但是它看起来很酷，对吧？我会先试一试，你可能会发现第二个库的性能影响甚至不明显。

如果您确实注意到性能受到影响，则可能需要尝试以下方法之一：

• Lightbox JS -原始的lightboxes之一。注意，有一个来自同一个作者的Lightbox2，但这个使用了Prototype & Scriptaculous
• HighSlide
• Floatbox
• TinyBox -这个没有大多数通用，但它很快，所以对于带有单个图像或内联内容的弹出窗口，它是一个很好的选择

Answer 2

只需包含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>

如果客户端要求优化，那就是另一回事了。