jQuery and CMS Made Simple

I just added the jQuery module to my CMSMS for the easy slider and a simple slide show.

Here’s how you do it:

1. Download the jQueryTools module for CMSMS. It has a dependant module that you will need to install if you don’t have it (CGExtensions). You can also go to Module Manager in your CMSMS admin and install jQueryTools from there.

2. Upload the jQueryTools module into the modules folder on your web server. Skip this if you added jQueryTools through module manager in your CMSMS admin.

3. Download the slideshow and easyslide JavaScript below. The CMSMS jQuery module comes with some JavaScript for certain functions already, but I had to add these two JavaScript files to make these the easy slider and simple slideshow work:
http://gowright.org/modules/JQueryTools/lib/jquery.slideshow.js
http://gowright.org/modules/JQueryTools/lib/jquery.easyslide.js

4. After downloading the two files, upload them into the modules/jQueryTools/lib/ directory.

5. Then update the action.incjs.php (located in the jQueryTools folder) to call those files into your page. You will need to add these two lines of code around line 65:

$slideshow_files = array(‘main’=>’jquery.slideshow.js’);
$easyslide_files = array(‘main’=>’jquery.easyslide.js’);

You will also need to add the easyslide and slideshow keywords to the $all_lib array and $std_libs (newer JQuery module version) in this file at about line 45 and 46:
$all_libs = array(‘base’,’tablesorter’,’cluetip’,’form’,’fancybox’,’json’,’cgform’,’slideshow’,’easyslide’);
$std_libs = array(‘base’,’tablesorter’,’cluetip’,’form’,’fancybox’,’json’,’cgform’,’slideshow’,’easyslide’);

6. Add the following smarty tags in the head of your template to activate jQuery on your site:
{JQueryTools action=incjs}
{JQueryTools action=ready}

7. Add you html in your page. Here is a smaple:

<img class=”active” title=”Frank Lloyd Wright” src=”uploads/images/home/frank-lloyd-wright-home-and-studio.jpg” alt=”Frank Lloyd Wright” width=”537″ height=”245″ /><img class=”last” title=”Frank Lloyd Wright’s Robie House” src=”uploads/images/home/frank-lloyd-wright-robie-house.jpg” alt=”Frank Lloyd Wright” width=”537″ height=”245″ />

Note: the first image should have have a class “active” and the last “last.”

Voila! You have a working jQuery easy slider and simple slide show.

Here is the CSS for the slideshow (You will have to adjust the CSS tho to make it pretty):

#banner {
position:relative;
height: 262px;
width: 658px;
}

#banner IMG {
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0.0;
}

#banner IMG.active {
z-index:10;
opacity:1.0;
}

#banner IMG.last-active {
z-index:9;
}

I have recently updated my sample because I needed to add links to the images.