Adding a basic image rotator

May 18, 2014 9:10 pm

Here are the basic steps to adding a rotating image to a website built with Accrisoft Freedom.

  1. In the Green Interface, go to the Toolbars Module and add a new custom module.
  2. Select any of the "Image Rotators". In this tutorial, we will use the very basic "Image Rotator - jQuery Cycle".
  3. You can change the Unique ID if you would like, but this cannot be changed after the rotator has been added. You can change the Toolbar Title at anytime. Click "Add Custom Module".
  4. Click Save and open the Blue Interface.
  5. Open the New Module and Add a few items. In this example, you will want to upload an image that is 960px wide and 324px tall. This can be changed later. The point is to upload images that are about the same size.
  6. Once you have at least two images (so you can see them rotate), open the Green Interface > Layouts Module > Page Layouts tab and edit the Home layout.
  7. Place your cursor where you want the image rotator to appear, click the Insert a Layout icon in the toolbar just above the body section and select the Image Rotator Lister.
  8. Save and view the homepage.


If you followed this tutorial correctly, your rotator will cycle through the images in your new module. The motion is scrollLeft. Now you can add options and edit the Lister Layout for your custom directory.

$('.pics').cycle({fx: 'scrollLeft' // choose your transition type, ex: fade, scrollUp, shuffle, etc...

Here are a few customized examples:

Change the effect:
Change 'scrollLeft' to fade for example. See below for a complete list of effects.
Change the length of time each image is shown: Add timeout option. *Notice the comma after scrollLeft. Each option requires a comma, except the last one. ALSO, the amount of time is in milliseconds.

$('.pics').cycle({
fx: 'scrollLeft',
timeout: '1000'

Next, adjust the speed of the transition. The example will transition for 3 seconds: Add - speed: '3000'

Helpful links:
List of Effects: http://jquery.malsup.com/cycle/browser.html
List of Options: http://jquery.malsup.com/cycle/options.html