Inpage Slideshows and Rotating Images with Links (outdated)

Here is how you can add slideshows into your page...You need to create your image tag like so with a wrapper DIV, then you need to provide a javascript array to all your photos. There is no include file required, as this feature is always available with all CMS created pages.

Note that if you want the starting image included in the slideshow on repeat, then you should add it as the first or last javascript array item. The order of the slides may differ depending on the effect used.

If you want to have multiple slideshows, please duplicate this code, replacing all occurances of "slideShow1" with "slideShow2", and so on.

Tips on using code below

  • cmsSlideShow('DIVNAME',speedmillisecs,arrayName,'EFFECT');
    • DIVNAME must exist, it can be empty, or not, if it contains a link, then that link will be the default link for all images
    • speed is in milliseconds
    • array is a 2 dimensional array, first element is the image source, then the link, then the target
    • EFFECT can be: fade, fadeFast, slideUp, slideDown, slideLeft, slideRight
  • We load the slideshow only once document is finished loading, to maximise page load speed.

Example Code

<div id="slideShow1DIV"><a href="/" title="Optional Link"><img src="/uploads/shared/images/banners/Feminine/hibiscus_D5C5D3.gif" border="0" /></a></div>

<script type="text/javascript">

var slideShow1Images=new Array();  //contains array of [img,url,title,target]

slideShow1Images[slideShow1Images.length] = ["/uploads/shared/images/banners/Feminine/bubbles_D6D7D9.gif","","",""];

slideShow1Images[slideShow1Images.length] = ["/uploads/shared/images/banners/Feminine/butterfly_EFC4CF.gif","http://www.google.com","Sample Title","_blank"];

slideShow1Images[slideShow1Images.length] = ["/uploads/shared/images/banners/Feminine/flowers_66CFE6.gif","","","_top"];

slideShow1Images[slideShow1Images.length] = ["/uploads/shared/images/banners/Feminine/hibiscus_D5C5D3.gif","","",""];

$(document).ready(function() {

cmsSlideShow('slideShow1DIV',3000,slideShow1Images,'fade'); //div, speedms, array,effectName

});

</script>

 

eg Fade

eg slideLeft

Index Previous Next