Javascript Lightbox as Part of a Distributed Code Snippet

I have been tasked with creating a code snippet that will be distributed to multiple websites for inclusion in their HTML. This code snippet will render a button, that when pressed will launch a lightbox that contains an iframe with content from a central website.

My thought is to use jQuery with a Lightbox Plugin (colorbox for example) however the websites including this code snippet may have an older (or newer) version o开发者_开发百科f jQuery or a different framework already included which will most likely cause problems.

My questions is; how would one include jQuery in a website in a way that would not interfere with other versions of jQuery or other frameworks?

Also, is this even the best way to approach this? Is there a Javascript Lightbox out there that doesn't use a framework?

Any help would be greatly appreciated!

---

Well, generally speaking, adding more than one js library to a page hurts performance. That goes for adding more than one version of a library, too. On each and every page load JQuery (and other libraries) must run quite a few test just to know which part of its own code to run (and for each version). Most of the time you don't notice it, but after adding a second library it may become an issue.

That said, running multiple versions of jQuery is easy. Set the newer version of jQuery to noconflict mode while giving it a different name (jquery let's you rename it's $ to whatever you want), such as $j2 or whatever (just make sure it's something compatible). Also, it I believe it has to be included before the older version so as not to conflict before it goes into noconflict mode. Then you put this line in a script tag immediately after you've included the newer jquery code:

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

You would load the second version of jQuery normally. Any subsequent calls to your newer jQuery would look something like:

$j2("myDiv") 

Personally, I am a big fan of colorbox. I feel that it is the best out there right now. It's fast, versatile, and rebrandable. So with the ability to change both the jQuery name and the colorbox name, you could make calls to colorbox look like this:

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

Of course, if your customers don't look at the code they won't notice it, but it looks cool, eh? I would try that first, you may find that the performance hit of a second library is not even noticable.

If you do notice a performance hit, you might want to try one of these:

• Lightbox JS - one of the original lightboxes. Note that there is a Lightbox 2 from the same author, but this uses Prototype & Scriptaculous
• HighSlide
• Floatbox
• TinyBox - this one is not quite as versatile as most but it's fast, so for popups with single images or inline content, its a good choice

---

Just include jQuery and use the noConflict() method. 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>

If the client asks for optimizations well that is a another story.