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: http://www.ecu.edu/cs-training/hallwa/Rotating-Images.cfm.
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:
- 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.