I created a very simple rotating testimonial feature using CMS Made Simple and jQuery. Note: this is a random rotation on page load. This does not rotate on it’s own. Here’s how:
1. Add jQueryTools module to your site (see this post step 1 and 2 for instructions).
2. Create a file named “jquery.randomtxt.js” and add this script below. The number 3 represents how many quotes you have to choose from. If you add another quoate change this number to 4…etc. Upload to the modules/jQueryTools/lib/ directory:
$(function() {
var randomNum = Math.floor(Math.random()*3);
$(‘div#quote-box-text div:eq(‘ + randomNum + ‘)’).css(“display”, “block”);
});
See my file here:
http://duttoncaseylaw.com/modules/JQueryTools/lib/jquery.randomtxt.js
3. Then update the action.incjs.php (located in the jQueryTools folder) to call this new randomtxt.js into your page. You will need to add ‘randomtxt’ to this two lines of code (around line 45). Make sure to add a comma before randomtxt:
$all_libs = array(‘base’,’tablesorter’,’cluetip’,’form’,’fancybox’,’json’,’cgform’,’randomtxt’);
$std_libs = array(‘base’,’tablesorter’,’cluetip’,’form’,’fancybox’,’form’,’cgform’,’randomtxt’);
You will also need to add a line of code around line 65:
$randomtxt_files = array(‘main’=>’jquery.randomtxt.js’);
4. Add this HTML to your page and swap out your content for the content below:
<div id=”quote-box-text”>
<div>This is my first quote</div>
<div>This is my second quote</div>
<div>This is my third quote</div>
</div>
5. Add this to your css file:
#quote-box-text div {
display: none;
}
6. Add the following smarty tags in the head of your template to activate jQuery on your site:
{JQueryTools action=incjs}
{JQueryTools action=ready}