Rotater Class
I’d like to release my first public class written for the Mootools framework. I call it the Rotater class, and its purpose is for those slideshow elements on pages, but without the need for controls. Most likely used for a splash-y area that should loop infinitely through images or content.
I’ll show you how create a Rotater using the constructor, and a live demo as well.
window.addEvent('domready',fuction(){
var rotater = new Rotater('.slide',{ //Class of elements that should rotate.
slideInterval:4000, //Length of showing each element, in milliseconds
transitionDuration:1000, //Length crossfading transition, in milliseconds
});
});
I find lots of clients are always in want of some such effect. This is sits in my library of Javascript to chuck into projects, and get fun effects super duper easily. Download it here!
This does required the Fx.Elements add-on on top of the regular Mootools framework, so be sure to grab the extra classes from Mootools More.
Hopefully, you’ll find it just as pluggable as I do. I’m open to revisions and added features to any class I release, so please leave me a comment about features or bugs (I never make those!).
Very cool! I like, I like…I will use in a few projects - good job
Now this is a GREAT class and all but dudeeeeeeeee fix Function your spelling is wrong but other then that its nice
First … nice work and thanks for sharing!
As mentioned above by Josh there are 2 probs i had to fix in MY(!) testings:
1.
window.addEvent(’domready’,fuction(){
should be:
window.addEvent(’domready’,function(){
2.
transitionDuration:1000,
should be:
transitionDuration:1000
to get this piece of code work properly in ie6
I did a really cool effect on this as well where I added a random method to randomly generate a star index over a group of images as follows
var range = 25;
var myRandomStart = Math.floor(Math.random() * range) + 1;
then in the JS portion the var Rotater for the value of startIndex just set that to myRandomStart. This has a nice effect for a list of pictures that you want someone when they come to your page that will randomly start the sequence then continue through the list. Just an added bonus for anyone who wants to use some added function
Other than that GREAT job and love it will be using it over and over again
@Josh: I was able to just put the Math.floor stuff into the startIndex declaration, and replaced “var range = 25;” with just “25″ in the new startIndex (result: “startIndex:Math.floor(Math.random() * ‘25′)”) In my (testing) implementation, I’ve only got three items, and your code was causing it to start totally blank at times (probably when it resulted in 3, then added 1 and botched when it found nothing). At any rate, thanks for the random start code; I’m definitely going to use it along with the class.
What I’d love is if I could have it transition to a random item with each firing (of limited value in my example of three items, but it’d still be a nice feature). With 25 examples (such as in the above example), there’d be plenty of variety.
Thanks for the class, Sean. I look forward to using it (and the related pluggable tabs) more in the future.