contoh : joomla - jquery

The first thing that you should always do before making any changes is take a backup of your site. You can do this manually or by using an extension like Akeeba backup, which can be found in the JED or at the following link:
http://extensions.joomla.org/extensions/access-a-security/backup/1606
Having a backup copy is essential to restore a working copy of our site if a mistake is made.
Also, you may be wondering whether, later, if you install a newer version of the extension, you may lose all of the changes made. This can happen; therefore, we have made these modifications after we have finished installing the extensions we need.
But don't worry too much about that. You won't be installing a newer version of an extension every day. Mostly, you will install a newer version of the extension if bugs have been found or if the version introduces some features you want.
Otherwise, if the site is working nicely and there are no bugs or newer features, we don't need to update these extensions.
Anyway, the most important thing to remember is to backup. Always keep a backup of your work.
As mentioned earlier, each one of the extensions that we are using is loading its own jQuery library, and thus makes our site needlessly load the library many times.
This makes our site download more files than are really necessary. Just take a look at the source code of your site. In the head section we can see the script tags that are loading the required libraries:

<script type="text/javascript"
    src="/plugins/system/cdscriptegrator/libraries/jquery
    /js/jsloader.php?files[]=jquery-latest.packed.js&amp;files[]=
    jquery-noconflict.js"></script>

  <script type="text/javascript"
    src="/plugins/system/cdscriptegrator/libraries/jquery/
         js/ui/jsloader.php?file=ui.core"></script>

  <script type="text/javascript"
    src="/plugins/system/scjquery/js/jquery-1.3.2.min.js"></script>

  <script type="text/javascript"
    src="/plugins/system/scjquery/js/jquery.no.conflict.js"></script>

  <script type="text/javascript"
    src="/plugins/system/scjquery/js/
    jquery-ui-1.7.2.custom.min.js"></script>

  <script type="text/javascript"
    src="/media/system/js/mootools.js"></script>

  <script type="text/javascript"
    src="/media/system/js/caption.js"></script>

  <script type="text/javascript"
    src="/plugins/content/ppgallery/res/jquery.js"
    charset="utf-8"></script>

  <script type="text/javascript"
    src="/plugins/content/ppgallery/res/jquery.prettyPhoto.js"
    charset="utf-8"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_ninja_shadowbox/ninja_shadowbox/js/adapter/
         shadowbox-jquery.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
       mod_ninja_shadowbox/ninja_shadowbox/js/shadowbox.js"></script>

  <script type="text/javascript"
    src="/modules/mod_ajaxsearch/js/script.js"></script>


  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_superfishmenu/tmpl/js/jquery.event.hover.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_superfishmenu/tmpl/js/superfish.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_c7dialogmod/jquery/ui.core.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_c7dialogmod/jquery/ui.dialog.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_c7dialogmod/jquery/ui.draggable.js"></script>

  <script type="text/javascript"
    src="http://wayofthewebninja.com/modules/
         mod_c7dialogmod/jquery/ui.resizable.js"></script>

Here we can see that lots of JavaScript files are being loaded, and some of them are repeated. Surely, that doesn't make our site load faster.
Let's try to improve this as much as we can. We will use the SC jQuery plugin in order to load the jQuery library. With the help of a variable created by this library we can also determine if the jQuery library needs to be loaded or not.
How is this done? If we open the plugins/system/scjquery.php file, at the very bottom of the file you can see the following code:

$app->set( 'jquery', true );

In newer versions of the plugin this line of code seems to have been removed. However we can modify the plugins/system/scjquery.php file and add that line to it, at the very bottom, just like this:

        ...
        $app->set( ‘jquery’, true );
        $doc->setHeadData($headData);
        return true;
    }
}

This way we will be able to use the techniques we are about to show.
This will set a variable jquery with the value true. Our next step is to use this variable to our benefit, just like we did in the ajaxSearch module. Open the modules/mod_ajaxsearch/mod_ajaxsearch.php file. We modified this file and it now appears as follows:

$app =& JFactory::getApplication();

if( !$app->get('jquery') ){
  $document->addscript(JURI::root(true).'modules'.DS.
               'mod_ajaxsearch'.DS.'js'.DS.'jquery-1.3.2.min.js');
}

First we need to get an instance of the global application object. We will then use the get method to try and read the 'jquery' variable. If this variable doesn't exist, it would mean that the SC jQuery plugin has not been loaded, and thus the jQuery library won't be present.
If this happens, we will let the module load its own copy of the library. This helps us in reducing the number of times the library has been loaded.
Now we are going to look into the other extensions that we used, seeing how we can solve each situation.

Code highlight

Remember the Core Design Chili Code plugin extension? We used it to reformat some code, as we can see in the next image:

This plugin required the jQuery library, but as the plugin itself doesn't have the library included, another plugin from the same developers was needed—the Core Design Scriptegrator plugin. You can check it in Extensions | Plugin Manager:

This plugins works much like the SC jQuery plugin, but for the extensions of the Core Design Chili Code plugin developers. This plugin loads the jQuery library, and some others that we don't need, in order for the other extensions to use it.
As we are using the SC jQuery plugin, we can disable the Scriptegrator plugin:

But hey, then the Core Design Chili Code plugin stops working. Why? We have said that the Chili Code plugin needs the jQuery library, but we are using the SC jQuery plugin to provide it. At this point we need to check the Chili Code plugin source code, so just open plugins/content/cdchilicode.php. Here we can see the following piece of code:

// define language
if (!defined('_JSCRIPTEGRATOR'))
{
      Error::raiseNotice('',
             JText::_('CHILICODE_ENABLE_SCRIPTEGRATOR'));
      return;
    }

    // require Scriptegrator version 1.3.4 or higher
    $version = '1.3.4';
    if (!JScriptegrator::versionRequire($version))
    {
     JError::raiseNotice('',
             JText::sprintf('CHILICODE_SCRIPTEGRATOR_REQUIREVERSION',
             $version));
      return;
    }


    if (!JScriptegrator::checkLibrary('jquery', 'site'))
    {
      JError::raiseNotice('', JText::_('CHILICODE_MISSING_JQUERY'));
       return;
    }

What does all this code do? It checks for the Core Design Scriptegrator plugin. If it doesn't find any evidence of the plugin, it raises some errors and returns.
We know that jQuery will be loaded. So we can comment the code mentioned, and the Chili Code plugin will work again.
That's it; we have just reduced one jQuery library load; ready for the next one?

Joomla! 1.5 JavaScript jQuery

Enhance your Joomla! Sites with the power of jQuery extensions, plugins, and more

Published: July 2010
eBook Price: £14.99
Book Price: £24.99
See more

(For more resources on Joomla!, see here.)

pPGallery plugin

Remember our gallery plugin? Surely you do; we used it to create an interesting image gallery in our home page:

This is our next objective. This plugin also uses the jQuery library, as we can see by checking the source code of our site:

<script type="text/javascript"
  src="/plugins/content/ppgallery/res/jquery.js"
  charset="utf-8"></script>
<script type="text/javascript"
  src="/plugins/content/ppgallery/res/jquery.prettyPhoto.js"
  charset="utf-8"></script>

The prettyPhoto library will be loaded as required, but loading the jQuery library needs some work. This time we will be working with the plugins/content/ ppgallery.php file. Here we need to find the following line:

$doc->addScript($relpath.'/plugins/content/ppgallery/res
        /jquery.js" charset="utf-8');

As we can see, this is where the plugin loads the jQuery library. We will modify this line to:

$app =& JFactory::getApplication();
if( !$app->get('jquery') ){
    $doc->addScript($relpath.'/plugins/content/ppgallery/res
            /jquery.js" charset="utf-8');
  }

As in the previous instances, we use the variable set by the SC jQuery plugin to decide whether the jQuery library needs to be loaded or not.
Once we have done so, the pPgallery plugin won't load the jQuery library if it is present, thus saving us another load. We are almost done now, just keep up the good work.

Shadowbox

This time we need to think twice about this extension. Looking at the source code of our site we see the following:

<script type="text/javascript"
  src="http://wayofthewebninja.com/modules/mod_ninja_shadowbox/
       ninja_shadowbox/js/adapter/shadowbox-jquery.js"> </script>
<script type="text/javascript"
  src="http://wayofthewebninja.com/modules/mod_ninja_shadowbox/
       ninja_shadowbox/js/shadowbox.js"></script>

We can see two library loads here:

• shadowbox-jquery.js
• shadowbox.js

However, though we may think the first one is a jQuery instance, it isn't. Does this mean we weren't using jQuery for this library? Not exactly; go to the administrator screen, then to Extensions | Module Manager | Ninja Shadowbox. There look for the Parameters zone; it will be more or less as follows:

Here we can see that when we first used the library we decided not to include the core JavaScript library. If we had included it, our source code would look as follows:

<script type="text/javascript"
  src="http://wayofthewebninja.com/modules/mod_ninja_shadowbox/
       ninja_shadowbox/js/lib/jquery.js"></ script>

<script type="text/javascript"
  src="http://wayofthewebninja.com/modules/mod_ninja_shadowbox/
       ninja_shadowbox/js/adapter/shadowbox-jquery.js"></script>

<script type="text/javascript"
  src="http://wayofthewebninja.com/modules/mod_ninja_shadowbox/
       ninja_shadowbox/js/shadowbox.js"></script>

Here we can now see how the jQuery library is being loaded. This way, by selecting Don't Include in the module's parameters, our work will be done with this library.

But we will need the SC jQuery plugin or to load the jQuery library ourselves.

This extension has been easy, as it includes a parameter that lets us select whether we want to load the jQuery library or not.

AJAX Header Rotator

This was one of the first extensions we used, and is one of the most visible parts of our site. Do you remember it? Look at the following screenshot:

This extension works a bit differently than the others that we have seen. As you may have noticed, we haven't seen its library load on the header section of our site. That's because this library loads its necessary libraries within the body part of our site.
Why don't we look at this more closely? Open the modules/mod_jw_ajaxhr/mod_ jw_ajaxhr.php file, and search for the following code:

<script type="text/javascript"
    src="modules/mod_jw_ajaxhr/jquery.js"></script>

<script type="text/javascript">jQuery.noConflict();</script>

<script type="text/javascript"
    src="modules/mod_jw_ajaxhr/jquery.innerfade.js"></script>

In this way scripts are included just in the body section of our site. In the previous extensions we saw the following code:

$document->addscript

This code snippet added scripts to the head section of our site.
Does this change the way in which we can detect if the jQuery library has been loaded? No, we can detect it the same way as we have done before, as follows:

<?php
  $app =& JFactory::getApplication();
  if( !$app->get('jquery') ){
?>

  <script type="text/javascript"
      src="modules/mod_jw_ajaxhr/jquery.js"></script>

  <script type="text/javascript">jQuery.noConflict();</script>

<?php
  }
?>

<script type="text/javascript"
    src="modules/mod_jw_ajaxhr/jquery.innerfade.js"></script>

Done, just as we have been doing previously. Easy, isn't it?

Content Slider module

This is another of the easy ones, as there's a parameter in the module's admin screen that lets us define if we want to load, or not load, the jQuery library.
Just go to the administrator screen of our site, then go to Extensions | Module Manager | Content Slider Module. Look for the Assume jQuery already loaded parameter, as seen in the following screenshot:

When we worked with this extension we set the parameter to Yes, as we knew we had already loaded jQuery. We will keep this parameter set to Yes, just so that we don't unnecessarily load another jQuery library. The next two extensions will be a bit different, but keep reading!

Summary

In this article we have removed the unnecessary library loads. This not only lets our site load faster, but also saves bandwidth and, more importantly, reduces the possibility of errors.