jQuery in Joomla

  • PDF

jQuery is one of the most popular JavaScript libraries (http://trends.builtwith.com/javascript).  Currently the Mootools JavaScript library is included with Joomla, however you can run both libraries together using the following snippet of code:

JHTML::_('behavior.mootools');

$document = &JFactory::getDocument();
$document->addScript( JPATH_SITE.'/media/system/js/jquery.js' );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

In addition to downloading the jQuery library to your website you could instead - and the preferred method is to refer to the Google hosted JQuery - you can do this using this code:

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

So in Joomla it would look like this:

JHTML::_('behavior.mootools');
$document = &JFactory::getDocument();
$document->addScript( "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" );
$document->addCustomTag( '<script type="text/javascript">jQuery.noConflict();</script>' );

For more information about how this is done as well as the performance impacts see this article, "3 Reasons why you Should let Google Host JQuery for you".

The no conflict function call helps by using an explicit call to jQuery() for functions instead of using the shorthand of $(), which would conflict with similar named Mootools functions.  (This snippet of code is from the complete Joomla Forum discussion located at this link : http://forum.joomla.org/viewtopic.php?f=304&t=283215.  There is additional information located here to integrate JQuery with the joomla framework.)

IMPORTANT: Change your jQuery Code

The next step is to change function calls in jQuery code from $() to jQuery(); this link illustrates how to do this - http://docs.jquery.com/Using_jQuery_with_Other_Libraries.

Before writing a lot of jQuery code in Joomla keep in mind that there is a penalty for loading two libraries.  So for a very performance intensive website you will want to write front end code with a single library.  However, if an effect you would particularly like is readily available in jQuery then that is the right call for quicker development path.

Here is a good article on how to include your jQuery library - http://www.designvsdevelop.com/jquery-in-joomla-i-was-wrong/

Once you have jQuery installed your can spruce up a Joomla website with the effects available in jQuery.  Here are a few nice sample jQuery effects:

Accordions

An accordion menu http://www.1stwebdesigner.com/resources/jquery-accordion-menus-tutorials/

including an horizontal accordion: http://designreviver.com/tutorials/jquery-examples-horizontal-accordion/ & another http://letmehaveblog.blogspot.com/2007/10/haccordion-simple-horizontal-accordion.html

Sliders

Wow Slider: http://wowslider.com/

The Anything Slider: http://css-tricks.com/examples/AnythingSlider/

http://vandelaydesign.com/blog/web-development/jquery-image-galleries/

LightBoxes

http://flowplayer.org/tools/demos/combine/portfolio/index.htm#

A samples of several lightboxes: http://line25.com/articles/rounding-up-the-top-10-jquery-lightbox-scripts

Sparklines

A set of jQuery graphing tools including the 'sparkline' concept from Edward Tufte: http://omnipotent.net/jquery.sparkline/

Exercise

In class create a simple module that implements one of the simple jQuery libraries.  These typically also require a stylesheet in addition to the JavaScript remember the method of adding stylesheets in Joomla:

$document->addStyleSheet( JURI::base() . 'modules/mymodule/css/mymodule.css', 'text/css' );

Remember to choose a jQuery effect that works well; good samples that work cross browser can be very useful to add to you 'code library' for all future development.

One last tip - to include a module with an article you can create a module position (in this case called 'jqueryposition', in an article using this tag: