Using jQuery with other libraries
3 January 2013Categories: jQuery
I recently coded a site for a customer which used jQuery. I also wanted to use Lokesh Dhakar’s Lightbox 2. The problem? jQuery uses the $() function by default but since LightBox 2 is based on Prototype which also requires the use of the $() function, there will be a conflict of interests. We’ll have a look at the problem and then what can be done to solve it.
Let’s set up a basic page first.
<!DOCTYPE html5> <html> <head> </head> <body> </body> </html>
Now we’ll add a simple piece of jQuery which can be inserted in the head section of the page:
<script type="text/javascript" src="script/jquery-1.7.1.min.js">
<script type="text/javascript">
$(document).ready(function()
{
window.alert("hello");
});
</script>
This will simply display a message box with a greeting. This works fine. But let’s incorporate the lightbox to see what issues may arise. Download the zip file from the Lightbox 2 website and navigate to the js folder. Extract builder.js, prototype.js, effects.js, scriptaculous.js and lightbox.js into your scripts folder and then add the following script tags to your html above the jQuery we defined.
<script type="text/javascript" src="script/prototype.js"></script> <script type="text/javascript" src="script/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="script/lightbox.js"></script>
Next, extract lightbox.css to wherever you want to store your css files and include the following link tag:
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
The final step in setting up the lightbox is to include the images which we’ll need for the various buttons to close the lightbox or navigate through the images. Locate the images folder in the zip file and extract them to where your would normally place your images. We now need to amend the lightbox.css file to reflect where your images are. Find the lines of css where the prevlabel.gif and nextlabel.gif are defined:
background: url(../images/prevlabel.gif) background: url(../images/nextlabel.gif)
Amend these two entries to reflect where your images are. You’ll also need to have a look at the lightbox.js file and look for the lines near the top of the file which resemble this:
fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif',
These lines will also need to be amended to reflect where your image files are located.
Now head over to Wikimedia Commons and grab yourself an image to use. Place this where you would normally store your images and add the following html within the body.
<a title="Some image" href="image/image.jpg" rel="lightbox">Click Me!</a>
Now call up your html in a browser. You’ll see that the message box appears and a link is inviting us to click it. If we do, we just get a link to the image itself. We want this to appear in a lightbox. So what has gone wrong? If you use Chrome, you can inspect the element or use FireBug with Firefox to get some information on the error.
Uncaught TypeError: Object [object Object] has no method 'dispatchEvent'
This is due to the fact that both prototype and jQuery are competing for use over the $() function. The solution is surprisingly simple. Before any jQuery is executed, you need to place the following piece of code:
jQuery.noConflict();
This releases the use of $() from jQuery to be used by other libraries. When including this, be mindful that you will have to amend your jQuery so that $() is not used. You must use jQuery() instead. So the message box code we used earlier should now read as:
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function()
{
window.alert("hello");
});
</script>
Reload your page again and you should see the message box and when clicking the link, you’ll see that your image is displayed in a lightbox.