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

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

我的想法是将jQuery与Lightbox插件（例如colorbox）结合使用，但是包含此代码片段的网站可能有较旧（或更新）的jQuery版本，或者已经包含了不同的框架，这很可能会导致问题

我的问题是,；如何在网站中包含jQuery，而不干扰其他版本的jQuery或其他框架

还有，这是最好的方法吗？有没有不使用框架的Javascript Lightbox

---

任何帮助都将不胜感激

一般来说，在一个页面中添加多个js库会影响性能。这也适用于添加多个版本的库。在每个页面上加载JQuery（和其他库）都必须运行很多测试，以便知道要运行它自己的代码的哪一部分（以及每个版本）。大多数情况下，您不会注意到它，但在添加第二个库之后，它可能会成为一个问题

也就是说，运行多个版本的jQuery很容易。将较新版本的jQuery设置为noconflict模式，同时给它一个不同的名称（jQuery允许您将它的

$

重命名为您想要的任何名称），例如

$j2

或其他任何名称（只需确保它是兼容的）。此外，我认为它必须在旧版本之前包含，以便在进入无冲突模式之前不会发生冲突。然后，在包含较新的jquery代码后，立即将这一行放入脚本标记中：

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

就我个人而言，我是彩盒的忠实粉丝。我觉得现在是最好的。它速度快，用途广泛，而且可以重新命名。因此，通过同时更改jQuery名称和colorbox名称的功能，可以对colorbox进行如下调用：

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

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

如果您确实注意到性能下降，您可能希望尝试以下方法之一：

• -一个原始的灯箱。请注意，有一个Lightbox 2来自同一作者，但它使用Prototype&Scriptaculous
• -这一个没有大多数功能那么多，但它很快，因此对于带有单个图像或内联内容的弹出窗口，它是一个不错的选择

---

只需包含jQuery并使用

noConflict（）

方法

jQuery.noConflict（）（函数（$）{
$（'a'）.lightBox（）；
});

---

如果客户要求优化，那就另当别论了。

回答得很好；非常感谢。我与raw JS+TinyBox达成了和解，因为我无法访问这些网站，以确保第一个jQuery没有冲突。

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

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