http://www.food-info.net/webmaster/dw_rotator.js

1/*************************************************************************
2    This code is from Dynamic Web Coding at dyn-web.com
3    Copyright 2001-2008 by Sharon Paine 
4    See Terms of Use at www.dyn-web.com/business/terms.php
5    regarding conditions under which you may use this code.
6    This notice must be retained in the code as is!
7    
8    Version date: August 2008
9    supports sequential and random rotation and IE win transition filter
10    requires dw_event.js 2008 version
11*************************************************************************/
12
13// arguments: image id, rotation speed, path to images (optional), 
14// new (optional) arguments: for transitions, mouse events and random rotation 
15function dw_Rotator(id, speed, path, bTrans, bMouse, bRand) {
16    var imgObj = document.getElementById(id); 
17    if (!imgObj) { // in case name, not id attached to image
18        imgObj = document.images[id];
19        if (!imgObj) return;
20        imgObj.id = id;
21    }
22    this.id = id; this.speed = speed || 4500; // default speed of rotation
23    this.path = path || "";  this.bRand = bRand;
24    this.ctr = 0; this.timer = 0; this.imgs = []; 
25    this._setupLink(imgObj, bMouse);
26    this.bTrans = bTrans && typeof imgObj.filters != 'undefined';
27    var index = dw_Rotator.col.length; dw_Rotator.col[index] = this;
28    this.animString = "dw_Rotator.col[" + index + "]";
29}
30
31dw_Rotator.col = []; // hold instances
32dw_Rotator.resumeDelay = 400; // onmouseout resume rotation after delay
33
34// mouse events pause/resume
35dw_Rotator.prototype._setupLink = function(imgObj, bMouse) { 
36    if ( imgObj.parentNode && imgObj.parentNode.tagName.toLowerCase() == 'a' ) {
37        var parentLink = this.parentLink = imgObj.parentNode;
38        if (bMouse) {
39            dw_Event.add(parentLink, 'mouseover', dw_Rotator.pause);
40            dw_Event.add(parentLink, 'mouseout', dw_Rotator.resume);
41        }
42    }
43}
44
45// so instance can be retrieved by id (as well as by looping through col)
46dw_Rotator.getInstanceById = function(id) {
47    var len = dw_Rotator.col.length, obj;
48    for (var i=0; i<len; i++) {
49        obj = dw_Rotator.col[i];
50        if (obj.id && obj.id == id ) {
51            return obj;
52        }
53    }
54    return null;
55}
56
57dw_Rotator.prototype.on_rotate = function() {}
58
59dw_Rotator.prototype.addImages = function() { // preloads images
60    var img;
61    for (var i=0; arguments[i]; i++) {
62        img = new Image();
63        img.src = this.path + arguments[i];
64        this.imgs[this.imgs.length] = img;
65    }
66}
67
68dw_Rotator.prototype.rotate = function() {
69    clearTimeout(this.timer); this.timer = null;
70    var imgObj = document.getElementById(this.id);
71    if ( this.bRand ) {
72        this.setRandomCtr();
73    } else {
74        if (this.ctr < this.imgs.length-1) this.ctr++;
75        else this.ctr = 0;
76    }
77    if ( this.bTrans ) {
78        this.doImageTrans(imgObj);
79    } else {
80        imgObj.src = this.imgs[this.ctr].src;
81    }
82    this.swapAlt(imgObj); this.prepAction(); this.on_rotate();
83    this.timer = setTimeout( this.animString + ".rotate()", this.speed);   
84}
85
86dw_Rotator.prototype.setRandomCtr = function() {
87    var i = 0, ctr;
88    do { 
89        ctr = Math.floor( Math.random() * this.imgs.length );
90        i++; 
91    } while ( ctr == this.ctr && i < 6 )// repeat attempts to get new image, if necessary
92    this.ctr = ctr;
93}
94
95dw_Rotator.prototype.doImageTrans = function(imgObj) {
96    imgObj.style.filter = 'blendTrans(duration=1)';
97    if (imgObj.filters.blendTrans) imgObj.filters.blendTrans.Apply();
98    imgObj.src = this.imgs[this.ctr].src;
99    imgObj.filters.blendTrans.Play(); 
100}
101
102dw_Rotator.prototype.swapAlt = function(imgObj) {
103    if ( !imgObj.setAttribute ) return;
104    if ( this.alt && this.alt[this.ctr] ) {
105        imgObj.setAttribute('alt', this.alt[this.ctr]);
106    }
107    if ( this.title && this.title[this.ctr] ) {
108        imgObj.setAttribute('title', this.title[this.ctr]);
109    }
110}
111
112dw_Rotator.prototype.prepAction = function() {
113    if ( this.actions && this.parentLink && this.actions[this.ctr] ) {
114        if ( typeof this.actions[this.ctr] == 'string' ) {
115            this.parentLink.href = this.actions[this.ctr];
116        } else if ( typeof this.actions[this.ctr] == 'function' ) {
117            // to execute function when linked image clicked 
118            // passes id used to uniquely identify instance  
119            // retrieve it using the dw_Rotator.getInstanceById function 
120            // so any property of the instance could be obtained for use in the function 
121            var id = this.id;
122            this.parentLink.href = "javascript: void " + this.actions[this.ctr] + "('" + id + "')";
123        } 
124    }
125}
126
127dw_Rotator.prototype.showCaption = function() {
128    if ( this.captions && this.captionId ) {
129        var el = document.getElementById( this.captionId );
130        if ( el && this.captions[this.ctr] ) {
131            el.innerHTML = this.captions[this.ctr];
132        }
133    }
134}
135
136// Start rotation for all instances 
137dw_Rotator.start = function() {
138    var len = dw_Rotator.col.length, obj;
139    for (var i=0; i<len; i++) {
140        obj = dw_Rotator.col[i];
141        if (obj && obj.id ) 
142            obj.timer = setTimeout( obj.animString + ".rotate()", obj.speed);
143    }
144}
145
146// Stop rotation for all instances 
147dw_Rotator.stop = function() {
148    var len = dw_Rotator.col.length, obj;
149    for (var i=0; i<len; i++) {
150        obj = dw_Rotator.col[i];
151        if (obj ) { clearTimeout(obj.timer); obj.timer = null; }
152    }
153}
154
155// for stopping/starting (onmouseover/out)
156dw_Rotator.pause = function(e) {	
157    e = dw_Event.DOMit(e);
158    var id = e.target.id;
159    var obj = dw_Rotator.getInstanceById(id);
160    if ( obj ) { clearTimeout( obj.timer ); obj.timer = null; }
161}
162
163dw_Rotator.resume = function(e) {
164    e = dw_Event.DOMit(e);
165    var id = e.target.id;
166    var obj = dw_Rotator.getInstanceById(id);
167    if ( obj && obj.id ) {
168        obj.timer = setTimeout( obj.animString + ".rotate()", dw_Rotator.resumeDelay );
169    }
170}
171
172// calls constructor, addImages, adds actions, etc.
173dw_Rotator.setup = function () {
174    if (!document.getElementById) return;
175    var i, j, rObj, r, imgAr, len;
176    for (i=0; arguments[i]; i++) {
177        rObj = arguments[i];
178        r = new dw_Rotator(rObj.id, rObj.speed, rObj.path, rObj.bTrans, rObj.bMouse, rObj.bRand);
179        try {
180            imgAr = rObj.images; len = imgAr.length;
181            for (j=0; j<len; j++) { r.addImages( imgAr[j] ); }
182            if( rObj.num ) r.ctr = rObj.num; // for seq after random selection
183            if ( rObj.actions && rObj.actions.length == len ) {
184                r.addProp('actions', rObj.actions);
185            }
186            if ( rObj.alt && rObj.alt.length == len ) {
187                r.addProp('alt', rObj.alt);
188            }
189            if ( rObj.title && rObj.title.length == len ) {
190                r.addProp('title', rObj.title);
191            }
192            if ( rObj.captions ) {
193                r.addProp('captions', rObj.captions);
194                r.captionId = rObj.captionId;
195                dw_Rotator.addRotateEvent(r, function (id) { 
196                    return function() { dw_Rotator.getInstanceById(id).showCaption(); }
197                }(rObj.id) ); // see Crockford js good parts pg 39
198            }
199        } catch (e) { 
200            //alert(e.message); 
201        }
202    }
203    dw_Rotator.start();
204}
205
206// add to on_rotate for specified instance (r)
207// see usage above for captions
208dw_Rotator.addRotateEvent = function( r, fp ) {
209    var old_on_rotate = r.on_rotate;
210    r.on_rotate = function() { old_on_rotate(); fp(); }
211}
212
213// for adding actions, alt, title
214dw_Rotator.prototype.addProp = function(prop, ar) {
215    if ( !this[prop] ) {
216        this[prop] = [];
217    }
218    var len = ar.length; 
219    for (var i=0; i < len; i++) {
220        this[prop][ this[prop].length ] = ar[i]; 
221    }
222}
223