Hi All,
I'm a bit of a novice with javascript, so please be patient with me.
I've created a function that basically takes an array of images and
rotates them on a web page. What I want to do is change this code to a
Class, so I can create multiple instances of the class and therefore
run multiple instances of it on the same web page.
Here is the current code that I have, which works absolutely fine and
have had no problems with. I'm showing you this, so you have an idea
of what I trying to convert to a class and that you are seeing real
working code to start with. This code is called from the web page as
an Event as follows:
Event.observe(window, "load", function() {
ImageRotater.init(iTrn,'imgTran');
});
[1 CODE START]
var iTrn=new Array();
iTrn[0]=new Image(387,336); iTrn[0].src="/images/cigar_and_snuff/
transitions/transition_8.jpg";
iTrn[1]=new Image(387,336); iTrn[1].src="/images/cigar_and_snuff/
transitions/transition_2.jpg";
iTrn[2]=new Image(387,336); iTrn[2].src="/images/cigar_and_snuff/
transitions/transition_3.jpg";
iTrn[3]=new Image(387,336); iTrn[3].src="/images/cigar_and_snuff/
transitions/transition_4.jpg";
iTrn[4]=new Image(387,336); iTrn[4].src="/images/cigar_and_snuff/
transitions/transition_5.jpg";
iTrn[5]=new Image(387,336); iTrn[5].src="/images/cigar_and_snuff/
transitions/transition_6.jpg";
iTrn[6]=new Image(387,336); iTrn[6].src="/images/cigar_and_snuff/
transitions/transition_7.jpg";
iTrn[7]=new Image(387,336); iTrn[7].src="/images/cigar_and_snuff/
transitions/transition_1.jpg";
var ImageRotater = function() {
var step = 0;
var fadestep = 0;
var timer;
var fotimer;
var fitimer;
var l, im;
return {
init:function(ia,d) {
l = $(d); im = ia;
setTimeout("ImageRotater.imgFadeOut()",5000);
},
imgFadeOut:function() {
clearInterval(fotimer);
fadestep = l.getStyle('opacity');
if (fadestep <= 0) { ImageRotater.imgTrans(); return; }
fadestep -= 0.02; l.setOpacity(fadestep); fotimer =
setInterval("ImageRotater.imgFadeOut()",50);
},
imgTrans:function() {
clearInterval(timer);
if (step >= im.length) step=0;
l.setOpacity(0.0); l.src=im[step].src; l.show(); step++;
ImageRotater.imgFadeIn();
},
imgFadeIn:function() {
clearInterval(fitimer);
fadestep = l.getStyle('opacity');
if (fadestep >= 1) { timer =
setInterval("ImageRotater.imgFadeOut()",5000); return; }
fadestep += 0.02; l.setOpacity(fadestep); fitimer =
setTimeout("ImageRotater.imgFadeIn()",50);
}
};
}();
[1 CODE END]
So that's the working code.
Now I want to convert this to a working class using Prototype
1.6.0.3. This is what I have so far and this code is called on the
webpage as an event as follows:
Event.observe(window, "load", function() {
var t = new RotateImages(ihTrn,'imgTran');
t.imgFadeOut();
});
I know that when the following line is executed, within the class,
nothing happens:
this.fotimer = setInterval("this.imgFadeOut",50);
If I change this line to the following:
this.fotimer = setInterval("this.imgFadeOut()",50);
Then it reports that this.imgFadeOut() is not a function.
[2 CODE START]
var RotateImages = Class.create({
initialize: function(i,d) {
this.step=0;
this.fadestep=0;
this.timer;
this.fotimer;
this.fitimer;
this.l=d;
this.im=i;
},
imgFadeOut: function() {
clearInterval(this.fotimer);
this.fadestep = $(this.l).getStyle('opacity');
if (this.fadestep <= 0) { this.imgTrans; }
else { this.fadestep -= 0.02;
$(this.l).setOpacity(this.fadestep);
this.fotimer = setInterval("this.imgFadeOut",50); }
},
imgTrans: function() {
clearInterval(this.timer);
if (this.step >= this.im.length) this.step=0;
$(this.l).setOpacity(0.0); $(this.l).src=im[this.step].src; $
(this.l).show(); this.step++; this.imgFadeIn;
},
imgFadeIn: function() {
clearInterval(this.fitimer);
this.fadestep = $(this.l).getStyle('opacity');
if (this.fadestep >= 1) { this.timer =
setInterval("this.imgFadeOut",
5000); }
else { this.fadestep += 0.02;
$(this.l).setOpacity(this.fadestep);
this.fitimer = setTimeout("this.imgFadeIn",50); }
}
});
[2 CODE END]
Any ideas how I can get round this problem, or even if it's possible
to do what I'm trying to do with this class?
Many thanks for your help!
Regards,
Kevin
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
