JavaScript: Add an Image Rotator to your Web Site

Here is a quick and simple way to add a fading image rotator to your website, using CSS and JavaScript

You’ll need to download the OM4 Simple Image Rotator javascript and stylesheet before you can use this.
Click Here to view a sample.

 

Prepare Your Images

Before you start, make sure that all your images that you want to include in this image rotator are the same dimensions, and have been optimised for web usage, so they dont slow down the whole page since the browser will download all the images when a user visits the page.

Set up your Rotator

On the page you want your rotator to appear, you must ensure that both the CSS and the JS file are referenced in the header. And you need to include JQuery

<link href="/css/rotator.css?ver=1.3.8" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
<script type='text/javascript' src='/js/rotator.js?ver=1.3.8'></script>

Then where you want the image rotator to appear, add the following code to setup the rotator object.

Be sure to update the totalnumimages property to the correct number of images you are using.

<script type="text/javascript">
    //>![CDATA[
    rotatorSettings['simplerotator_1'] = {
      interval : 5000,
      transition : 2000,
      cycles : 0,
      startdelay : 0,
      fullscreen : 0,
      topoffset : 0,
      rightoffset : 0,
      bottomoffset : 0,
      leftoffset : 0,
      losingside : 'bottom',
      ensurefullscreen : 1,
      dimensions : 1,
      totalnumimages : 6
    }
    //]]>
</script>

 Followed by a DIV element that contains each of the images you want to include in your image rotator.
Be sure to set the width and height of this div to the width and height of your images.

<div class="simplerotator alignright" id="simplerotator_1" style="width: 300px; height: 200px;" >
    <img src="applesplash-rtr.jpg" alt="" class="hidden active first" />
    <img src="brightonbeach-rtr.jpg" alt="" class="hidden" />
    <img src="clownfish-rtr.jpg" alt="" class="hidden" />
    <img src="frogdipper-rtr.jpg" alt="" class="hidden" />
    <img src="greatoceanroad-rtr.jpg" alt="" class="hidden" />
    <img src="ladderintoocean-rtr.jpg" alt="" class="hidden" />
</div>

This image rotator is provided by OM4