Lightbox and MooTools

Do you have a Tip, Trick or Tool that you think would be useful to others, or a Teaser that you would like us to try and help with?

Why not share it here, click the button below to submit it to us for possible inclusion on this site.

Share a T!

Works with:
WebPlus X5

When you use mootools (and some other javascript utilities) with Serif Lightboxes and some other Serif utilities that use the jQuery.js on the same page you will get conflicts, which either:

1. Cause one or both not to work.

2. Cause strange un-desired results.

This is because both libraries have functions with the same name and if the function is called with the $ as in:

<script type="text/javascript">
$(document).ready(function() {

$('a[rel*=wplightbox]').wplightbox({ strImgDir: 'wpimages/', strScriptDir: 'wpscripts/', nButtonType: 2, nBorderType: 6 });

})
</script>

The page does not know which function to use, and will either pick the wrong one or none at all.

With mootools the solution I have come up with is as follows:

Supposing you have the following in the <head> of your page

<script language="javascript" type="text/javascript" src="mooscripts/mootools-1.2.1-core.js"></script>
<script language="javascript" type="text/javascript" src="mooscripts/mootools-1.2-more.js"></script>
<script language="javascript" type="text/javascript" src="mooscripts/slideitmoo-1.1.js"></script>

You add a Light box and Serif WebPlus X5 adds:

<script type="text/javascript" src="wpscripts/jsFlashVer.js"></script>
<script type="text/javascript" src="wpscripts/jquery.js"></script>
<script type="text/javascript" src="wpscripts/jquery.wplightbox.js"></script>

You now have the jquery.js and the mootools-1.2.1-core.js, mootools-1.2-more.js and slideitmoo-1.1.js on the same page, this is what causes the issues.

Solution:

1.	Edit each of the three mootools libraries in a text editor such as notepad++ .

2.	Do a search and replace for all the $'s and replace them all with something like moo.

3.	Save the scripts with a new name (I suggest adding a couple of letters in the front and a -, so that mootools-1.2.1-core.js becomes say rs-mootools-1.2.1-core.js.)

4.	Repeat with all mootools scripts.

5.	Replace the scripts in your site with the new ones.

6.	Then edit the code in the <head> of your page so that the new script files are referred to.

eg:

    <script language="javascript" type="text/javascript" src="mooscripts/rs-mootools-1.2.1-core.js"></script>
    <script language="javascript" type="text/javascript" src="mooscripts/rs-mootools-1.2-more.js"></script>
    <script language="javascript" type="text/javascript" src="mooscripts/rs-slideitmoo-1.1.js"></script>

(NOTE: If you refer to any functions in mootools on your page using the $ you will need to replace the $ with moo or whatever you replaced the $ with in the library)

The Serif Lightbox or other utility using the jquery.js will now happily co-reside with mootools on the same page as each other.

This may well work with other script libraries that conflict with jQuery, if you have this issue with another library and the solution above works, please post a reply for others to benefit from the solution. Thanks.