diff --git a/README.md b/README.md new file mode 100644 index 0000000..ab98772 --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +SlideShow +========= + +![SlideShow](http://github.com/rpflorence/SlideShow/raw/master/logo.png) + +The ultimate, class-based, slideshow class. Use any element, not just images. so it's prefect for galleries, newstickers, whatever. Comes with packaged transitions but is ridiculously easy to extend and create your own transitions. + +How to use +---------- + +#### html + +
+
1
+
2
+
3
+
4
+
5
+
6
+
+ +#### css + + div#slides { + position: relative; + width: 500px; + height: 280px; + overflow: hidden; + } + + div#slides div { + position: absolute; + width: 500px; + height: 280px; + } + +#### javascript + mySlideShow = new SlideShow('slides',{ + delay: 2000 + }).startLoop(); + + + +Extending SlideShow with your own transitions +--------------------------------------------- + + SlideShow.add('fade', function(previous, next, duration, instance){ + previous.set('tween',{duration: duration}).fade('out'); + return this; + }); + + SlideShow.add('blindLeft', function(previous, next, duration, instance){ + var distance = instance.element.getStyle('width').toInt(); + next.setStyles({ + 'left': distance, + 'z-index': 1 + }).set('tween',{duration: duration}).tween('left', 0); + return this; + }); + + SlideShow.add('blindLeftFade',function(previous, next, duration, instance){ + this.blindLeft(previous, next, duration, instance).fade(previous, next, duration, instance); + }); + +That's it! The class will handle resetting just about anything you might to to the previous tween's styles. + +Yes, that last one combines the previous two effects into one. + +View the [MooDoc](http://moodocs.net/rpflo/mootools-rpflo/SlideShow) for more usage and examples. diff --git a/Source/SlideShow.js b/Source/SlideShow.js index b18d7a8..749cd4b 100644 --- a/Source/SlideShow.js +++ b/Source/SlideShow.js @@ -1,3 +1,25 @@ +/* +--- + +script: SlideShow.js + +description: The ultimate, class-based, slideshow class. Use any element, not just images. so it's prefect for galleries, newstickers, whatever. Comes with packaged transitions but is ridiculously easy to extend and create your own transitions + +license: MIT-style license. + +authors: Ryan Florence + +docs: http://moodocs.net/rpflo/mootools-rpflo/SlideShow + +requires: +- core:1.2.4: '*' + +provides: [SlideShow] + +... +*/ + + var SlideShow = new Class({ Implements: [Options, Events, Loop], diff --git a/logo.png b/logo.png new file mode 100644 index 0000000..9f2f499 Binary files /dev/null and b/logo.png differ diff --git a/package.yml b/package.yml new file mode 100644 index 0000000..e09f99d --- /dev/null +++ b/package.yml @@ -0,0 +1,7 @@ +name: SlideShow +author: rpflo +category: Widgets +tags: [slideshow, gallery] +docs: http://moodocs.net/rpflo/mootools-rpflo/SlideShow +demo: http://mooshell.net/QqFPw/embedded/result,js,html,css/ +current: 0.5 \ No newline at end of file