Rotate Images Documentation

Generally, the best starting point for setting up the Rotate Images JavaScript is to select an example from the download file that most closely resembles the implementation you desire.

Examples in the download file are designed to make it as easy as possible for you to locate the code components required.

Instructions

The following list outlines the simple steps for implementing the code. Details on each step are available below.

1. Include script tags pointing to the external JavaScript files.
2. Place an image tag in the document where you wish your images to rotate.
3. Set up the rotator's properties in an object literal.
4. Initialize the code.

Script Tags

Place script tags for the external JavaScript files in the head of your document:

<script src="js/dw_event.js" type="text/javascript"></script>
<script src="js/dw_rotator.js" type="text/javascript"></script>

Some implementations (such as Random Rotation) require an additional JavaScript file: dw_rotator_aux.js. The example documents in the download file will include all required files. ^

Image Tag

Place an image tag in the document where you wish your images to rotate. Include the id attribute in the tag and assign a unique id. Assign the first image to appear there to the src attibute. For example:

 <!-- Images rotate here. -->
 <img id="r1" src="images/smile.gif" alt="" />

Other image tag attributes, including height and width, are optional. See information on using images of varying dimensions in the rotation.

If your image is to be linked you specify the URL in the link's href attribute:

 <!-- Images rotate here. -->
<a href="index.html"><img id="rotate_img" src="images/swans.gif" alt="" /></a>

A blue border will appear around linked images unless you indicate otherwise, either in the border attribute of the image tag (border="0") or in the style sheet. If you are using a strict doctype and want your document to validate, place the following in the style sheet:

a img { border:none; }

Even if each image is to navigate to a different URL onclick, you set up the initial image this way with the first URL or other action to be taken on click. See more information for setup of linked images with separate destination URLs by viewing the Linked, Distinct URL's example.

Note: Random Rotation requires a different setup if the first image is to be selected at random from your list of images. ^

Rotator Properties

Specify what images you want to include as well as other properties in an object literal[1] as demonstrated here:

var rotator1 = {
    path: 'images/', // path to your images
    id:   'r1', // id assigned in image tag
    speed:  4000, // rate of rotation (in milliseconds)
    bTrans: true, // transition filter for IE Win
    images: ["smile.gif", "grim.gif", "frown.gif", "bomb.gif"]
}

There are several other properties that you can control with specifications in the object literal, such as actions (or URLs onclick), captions, titles, and more. A complete list is provided once a license is purchased. The examples demonstrate and describe the most commonly used properties. ^

Initialize

The code is initialized with a call to dw_Rotator.setup:

function initRotator() {
    // pass name of variable containing rotator properties
    dw_Rotator.setup(rotator1);
}

dw_Event.add( window, 'load', initRotator);

The variable(s) containing the rotator properties and the function to initialize the rotator can be included in a script segment or in an external JavaScript file. ^

About Image Size Variation

If you place the first image in your page source and include height and width attributes in the image tag, subsequent images not that size will be resized to fit those height/width specifications. If you do not include height and width attributes, current browsers will display the images at their actual sizes and reflow page content as needed. You can set width and height on a containing element large enough to accomodate the largest image to be rotated in to avoid document reflow.

If your images vary in size, it is suggested that you turn off the transition filter option (bTrans in rotator properties) since it may be a less than attractive effect under these circumstances.

More with License Purchase

Additional documentation and examples are available with a license purchase. These extras include:

• A complete list of the rotator properties available in the code, with a brief description for each.
• More detailed instructions for implementations such as random rotation, multiple instances, and rotating captions with images.
• Rotating titles along with images.
• Stop/start rotator controls.
• Calling a function or opening a sub-window onclick.

If you have purchased a license within the past 12 months you may access the additional documentation as well as download an alert-free copy of any code updates. You will need your transaction ID and invoice number to access the code, documentation and additional demos provided to licensed users.

Feel free to contact dyn-web if you are unable to locate your invoice number and transaction ID and we will try to assist you.

Back to top