Rotating Images with the Cycle Element Tutorial


The newest Custom Element is Cycle Images.  This element uses the Jquery Cycle plugin to create a rotating images effect.  The element has 12 different transition effects.  Several examples of the effects that this element can perform can be seen here:

To use the element, you just need a collection of identically sized images.  The element takes all those images, lets you specify a duration and effect and then creates all the JavaScript and HTML for you.

First, log into your tools page and create a new folder.  For this example, I named my folder rotatingImages.  Then upload as many identically sized images as you want into that folder.  The images can be different types (jpegs, gifs and pngs are all allowed) but for the element to display the images properly, they must all be the same size.  For my examples, I used images 770 pixels wide and 170 high.

Next, add a Cycle Images Custom Element (listed under Custom Elements) to your page.  Then click the “Click here to define the custom element data” link.  A popup window will launch.  Fill in the appropriate fields, like so:

  • Image Directory – the folder name where you uploaded the file.  Required.
  • Time to display – the the length of time in seconds to display each image before the transition effect takes place.  Required.  Must be a number, and  decimals are valid, so you can put 3.5 to display each image for three and a half seconds.
  • Change Duration – The length of time in seconds that the transition should take.  Required.  Must be a number, decimals are valid.  In my opinion, all the effects except the Fade effect look best with short (i.e. less than one second) durations.  The fade effect looks very nice with relatively long (5 seconds or more) durations.
  • Transition Effect – the visual effect that you want as the images change.  The option are:
    • Fade – The current image fades out and the next image fades in at the same time.
    • Cover – The current image remains in place and the next image moves in from the left to cover it.
    • ScrollDown – The current image moves down and at the same time the next image moves down to replace it.
    • ScrollUp – The same as ScrollDown but upward instead of downward.
    • ScrollLeft – The same as ScrollDown but the direction is to the left.
    • ScrollRight – The same as ScrollDown but the direction is to the right.
    • SlideX – The current image appears to fold in to the left and the next image folds out to the right.
    • Turndown – Simulates somewhat the effect of turning a photocube downward.
    • CurtainY – The current image folds in toward the middle and the next folds out from the middle.
    • Wipe – The current image remains in place and the next image is revealed from the top left diagonally to the bottom right.
    • Toss – The current image moves off screen to the right, revealing the next image beneath.
    • Shuffle – The current image moves off to the left and then moves behind the next image.
  • Height – The height of the images in pixels.  Required.
  • Width – The width of the images in pixels.  Required.
  • Margin – The CSS margin desired for the element.  Optional, by default is set to 0.  When using the element as a replacement for the header image, then 0 is what you want.  If you are using the element anywhere else on a page and want to have the image use all the width of the page, you need to set this to -10 (negative 10) to compensate for the inherited properties.


Two final caveats:

  1. If you try to put two of these on a page, only the first will work.  This is because the JavaScript works by identifying the element by its id, and these must be unique.
  2. If you copy a page that this element is on, then if you change anything in this element, it will be changed on both pages, since those pages will be sharing one instance of the element.  You can copy the page and then remove the element and add a new one however to prevent this from happening.

As always, if you have questions, comments or suggestions, please let me know.  And be sure to check out the ITCS Learning Center for lots more information about how to use CommonSpot more effectively.

5 thoughts on “Rotating Images with the Cycle Element Tutorial

  1. Brian Hall Post author

    Hi Percevial,

    The problem was that you made the template in the /cs-cas directory, so the element was using the images from the /cs-cas/customcf/randomimages directory, but when you made a page in the students subdirectory, it was looking for a customcf/randomimages folder in that subsite, but it didn’t exist. I copied that folder to the students directory and so now it is working. Let me know if you have any other problems with it or need anything else.

  2. Brian Hall Post author

    Hi Jennifer,

    I was thinking about adding this feature but wasn’t sure if anyone would want it. Since there is interest in this, I’ll add it to the list of things to do. Thanks for the feedback.

  3. Jennifer Vinciguerra

    Is it possible to also have the images serve as hyperlinks to other pages? I was thinking this looked like a convenient way to have a slideshow of news stories without having to build it all in Flash.

  4. Pingback: Tech Tips » New CommonSpot Tuesday Tutorial: Image Cycling

Leave a Reply