At this point, we must all agree that the SC jQuery plugin has been of great help to us. With very little effort we have been able to detect if the jQuery library has been loaded, and with that knowledge, decide whether to load it or not.

However, at this point, the SC jQuery plugin provides us with the following jQuery and jQuery UI versions:

What can we do if we want to use newer versions? Some possibilities are as follows:

This last option is also quite easy to accomplish, and is the one we are going to follow in this tip. First, we need to open the plugins/system/scjquery.php file. Inside this file we are going to search for jQuery:

if ( file_exists( $file_path . 'js' . DS . 'jquery-1.3.2.min.js' ) && file_exists( $file_path . 'js' . DS . 'jquery.no.conflict.js' ) ) {
                    $doc =& JFactory::getDocument();
                    $doc->addScript( $url_path . 'js/jquery-1.3.2.min.js' );
                    $doc->addScript( $url_path . 'js/jquery.no.conflict.js' );
                

Here we can see how the plugin is first checking for the files, and then if they exist, using the $doc->addScript to load them in the header section of our site. If we want to use another library version, we first need to modify these lines.

Assume that we are going to use jQuery version 1.4.1, that uses a file such as jquery-1.4.1.min.js. In this case, we should change the previous code as follows:

if ( file_exists( $file_path . 'js' . DS . 'jquery-1.4.1.min.js' ) && file_exists( $file_path . 'js' . DS . 'jquery.no.conflict.js' ) ) {
                    $doc =& JFactory::getDocument();
                    $doc->addScript( $url_path . 'js/jquery-1.4.1.min.js' );
                    $doc->addScript( $url_path . 'js/jquery.no.conflict.js' );
                

We also need to place the jquery-1.4.1.min.js file inside the plugins/system/scjquery/js folder. After that we should check our site, just to see that everything is still working.

Luckily for us our site is working perfectly, and if we check the source code we will see:

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

We are using the new jQuery version. The process for changing the jQuery UI version is mostly the same. Say we want to use the jquery-ui-1.8rc1 version, we will look for the following code:

if ( file_exists( $file_path . 'js' . DS . 'jquery-ui-1.7.2.custom.min.js' ) && file_exists( $file_path . 'css' .DS . 'ui-lightness' . DS . 'jquery-ui-1.7.2.custom.css' ) ) {
                    $doc->addStylesheet( $url_path . 'css/' . $ui_theme . '/jquery-ui-1.7.2.custom.css' );
                    $doc->addScript( $url_path . 'js/jquery-ui-1.7.2.custom.min.js' );
                

And, if the file we are going to use is called jquery-ui.min.js, we change the previous code to look as follows:

if ( file_exists( $file_path . 'js' . DS . 'jquery-ui.min.js' ) && file_exists( $file_path . 'css' .DS . 'ui-lightness' . DS . 'jquery-ui-1.7.2.custom.css' ) ) {
                    $doc->addStylesheet( $url_path . 'css/' . $ui_theme . '/jquery-ui-1.7.2.custom.css' );
                    $doc->addScript( $url_path . 'js/jquery-ui.min.js' );
                

Of course, we need to place the jquery-ui.min.js file inside the plugins/system/scjquery/js folder.

We are done updating our libraries, which is also very easy to do. But what if we want to add a new theme to use? If we look in the plugins/system/scjquery/css folder, we will see all the available themes. Say, for example, we want to add a theme called "excite-bike", which is not present in the plugin by default.

In this case, we will copy the excite-bike folder into our plugins/system/scjquery/css folder.

Of all the files inside the excite-bike folder, we only need the jquery-ui.css file, as it contains all the styles necessary.

We can delete all the other files, except the images folder. We also need to rename the jquery-ui.css file to jquery-ui-1.7.2.custom.css, as the plugin tries to open the themes by that name:

$doc->addStylesheet( $url_path . 'css/' . $ui_theme . '/jquery-ui-1.7.2.custom.css' );
                

It's easier to change one file's name than to change all the other ones.

Now, once we are done with those changes, if we go to our administrator screen and then to Extensions | Plugin Manager | System - SC jQuery, we will be able to select the new theme, as follows:

In this way we can add as many themes as we want. Why don't you try to add some now?