It showing me, only first image. no effect . no error. what to do?
On Aug 14, 3:52 pm, "Steve Onnis" <[email protected]> wrote: > It all works form me > > Are you getting an error? If so what is it? > > -----Original Message----- > From: deep [mailto:[email protected]] > Sent: Friday, 14 August 2009 8:25 PM > To: MooTools Users > Subject: [Moo] Re: Auto Fade in Fade out > > 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.
