Hey steve,
Thnaks for your immidiate response. i have tried your code but it
seems its not working for me. :(
bellow is the code.
[code]
<html>
<head>
<script type="text/javascript" >
<script type="text/javascript" src="mootools-1.2.3-core-yc.js"></
script>
<script type="text/javascript" src="mootools-1.2.3.1-more.js"></
script>
<script type="text/javascript" src="layout.js"></script>
<script type="text/javascript" src="Actions.js"></script>
<script type="text/javascript" src="Editor.js"></script>
<script type="text/javascript">
var SlideShow = new Class({
Implements : [Events, Options],
Extends: Fx,
options : {
delay : 1000,
duration : 2000,
onInitialize : $empty,
onChange : $empty,
onMouseOver : $empty,
onMouseOut : $empty,
onPress : $empty,
onStart : $empty,
onComplete : $empty
},
initialize : function(element, options) {
this.setOptions(options);
this.container = element,
this.children =
this.container.getElements(this.container.getFirst
().tagName);
this.options.init = !options.onInitialize ? $empty :
options.onInitialize.bind(this);
this.options.start = !options.onStart ? $empty :
options.onStart.bind
(this);
this.options.mouseover = !options.onMouseOver ? $empty :
options.onMouseOver.bind(this);
this.options.mouseout = !options.onMouseOut ? $empty :
options.onMouseOut.bind(this);
this.options.click = !options.onPress ? $empty :
options.onPress.bind
(this)
this.children.addEvent("mouseover", function()
{this.options.mouseover.run();}.bindWithEvent(this));
this.children.addEvent("mouseout", function()
{this.options.mouseout.run();}.bindWithEvent(this));
this.children.addEvent("click", function()
{this.options.click.run
();}.bindWithEvent(this));
this.intervalID = null;
this.currentIndex = 0;
this.children.setStyle("opacity", 0);
this.children[0].setStyle("opacity", 1);
this.count = this.children.length;
this.position = this.currentIndex+1;
this.init();
},
init : function () {
this.options.init.run()
},
start : function () {
this.fireEvent("start");
},
mouseover : function () {
this.options.mouseover.run()
},
click : function () {
this.options.click.run()
},
complete : function () {
this.fireEvent("complete");
},
play : function () {
this.intervalID = this.next.periodical(this.options.delay, this)
},
stop : function () {
$clear(this.intervalID);
},
next : function () {
this.fadeOut();
this.fadeIn();
this.fireEvent("change");
},
fadeIn : function () {
this.currentIndex = this.currentIndex+1 == this.children.length
?
0 : ++this.currentIndex;
this.position = this.currentIndex + 1;
new Fx.Morph(this.children[this.currentIndex], {
duration : this.options.duration,
wait : false,
onStart : function ()
{this.fireEvent("start")}.bind(this),
onComplete : function ()
{this.fireEvent("complete")}.bind(this)
}).start({"opacity": 1});
},
fadeOut : function () {
new Fx.Morph(this.children[this.currentIndex], {duration :
this.options.duration, wait : false }).start({"opacity": 0});
},
getCount : function () {
return this.count;
},
getPosition : function () {
return this.position;
},
getItem : function () {
return this.children[this.currentIndex];
}
});
/// JS for html page
window.addEvent("domready", function () {
slideShow = new SlideShow ($("slide"), {
delay : 2000,
duration : 1000,
onInitialize : function () {
this.start();
},
onStart : function () {
var img = this.getItem().getElement("img");
var captionStr = img.get("alt") == null ?
img.get("title") ==
null ? img.get("src").split("/").getLast() : img.get("title") : img.get
("alt")
$("currentPosition").set("text", this.getPosition());
$("totalCount").set("text", this.getCount());
$("caption").set("text", captionStr);
},
onMouseOver : function () {
this.stop();
$("status").set("text", "stopped");
},
onMouseOut : function () {
this.play();
$("status").set("text", "playing");
}
}).play();
});
</script>
<style>
#outer {
padding:10px;
background:#c0c0c0;
width:322px;
border:1px outset #ccc
}
#slide {
list-style:none;
list-style-type:none;
margin:0px;
padding:0px;
position:relative;
height:150px;
width:320px;
background:#fff;
border:1px outset #ccc
}
#slide li {
position:absolute;
width:320px;
text-align:center
}
#slideIndicator {
font-family:arial;
padding:5px;
text-align:center;
font-size:11px;
}
#caption {
font-size:16px;
font-family:tahoma;
font-weight:bold;
padding:0px 0px 10px 0px;
}
</style>
</head>
<body>
<div id="outer">
<div id="caption"></div>
<ul id="slide">
<li><img src="images/logo_newyear.gif" /></li>
<li><img src="images/newyear03.gif" /></li>
<li><img src="images/googlepump.gif" /></li>
<li><img src="images/newyear04.gif" /></li>
<li><img src="images/newyear08.gif" /></li>
</ul>
<div id="slideIndicator">
<span id="currentPosition"></span>/<span
id="totalCount"></span><br /
>
</div>
</div>
</body>
</html>
[/code]
please try it on your machine and please tell me what i need to change
here so it can work for me.
Thank you
On Aug 14, 3:19 pm, "Steve Onnis" <[email protected]> wrote:
> I have cleaned this up a bit more and put it into a Class
>
> http://mooshell.net/Vzgwz/4
>
> Also added
>
> - onInitialize : First thing that happens
> - onChange : When it switches from one item to the next
> - onStart : When it starts to move to the next item.
> - onComplete : When it finishes changing to the next item
> - onMouseOver : Function for mouse over
> - onMouseOut : Function for mouse out
> - onPress : Function for mouse click
>
> Might have more a play with it when I get around to using it myself....
>
> Any suggestions or feedback feel free to holla
>
> Steve
>
> -----Original Message-----
> From: deep [mailto:[email protected]]
> Sent: Friday, 14 August 2009 7:19 PM
> To: MooTools Users
> Subject: [Moo] Re: Auto Fade in Fade out
>
> Hello Steve ,
>
> This is exactly i have been looking for. :) thanks a lot. Now i ll
> try to apply this with my feeds
> If gets stuck somewhere again i will knock here.
>
> Thanks a lot again for sharing this code.
>
> Deepali
>
> On Aug 14, 11:28 am, "Steve Onnis" <[email protected]> wrote:
> > I need to do something similar soon so I thought I would knock something
> > together
>
> > Is this the sort of thing you are looking for?
>
> >http://mooshell.net/snwMS/
>
> > With this you can so it with pretty much anything. I have used a <ul>
> list
> > for this example but you can use divs or what ever, as long as it is
> nested.
> > You can style the html how ever you need to...this is just a demo and
> could
> > be extended to suit what ever your needs were.
>
> > Steve
>
> > -----Original Message-----
> > From: deep [mailto:[email protected]]
> > Sent: Friday, 14 August 2009 2:53 PM
> > To: MooTools Users
> > Subject: [Moo] Re: Auto Fade in Fade out
>
> > Thanks for your reply Aaron Newton,
> > I ll check those tutorials.
>
> > Actually i want this kind of effect actually
>
> >http://twitspy.com/
>
> > after 4 sec it show new twitter entry. Is that done with mootools?
>
> > please suggest me some tutorial for this effect.
>
> > On Aug 13, 8:29 pm, Aaron Newton <[email protected]> wrote:
> > > You might read up on effects in the mootorialhttp://www.mootorial.com
>
> > > On Wed, Aug 12, 2009 at 9:51 PM, deep <[email protected]> wrote:
>
> > > > Hello,
>
> > > > I have goggled a lot. but couldn't able to find out for the auto fade
> > > > in fade out effect using mootools.
>
> > > > I have found this link but its showing the fading effect on click.
>
> >http://www.sweetvision.com/2008/03/17/using-mootools-to-fade-between-...
>
> > > > Actually i want to give this effect to show my latest feeds.
>
> > > > Can anyone have worked on this kind of effect. or can anyone show me
> > > > related link to this topic?
>
> > > > Thanks in advance.
