Permalink
Browse files

first launch

  • Loading branch information...
1 parent 7436dbb commit 13497b35f570a7f2a949c259b6b21d400694d0cb @ryanflorence committed Dec 13, 2009
Showing with 98 additions and 0 deletions.
  1. +69 −0 README.md
  2. +22 −0 Source/SlideShow.js
  3. BIN logo.png
  4. +7 −0 package.yml
View
@@ -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
+
+ <div id="slides">
+ <div class="transition:crossFade duration:1000">1</div>
+ <div class="transition:blindLeft duration:500">2</div>
+ <div class="transition:blindRightFade duration:400">3</div>
+ <div class="transition:fade duration:1000">4</div>
+ <div class="transition:pushUp duration:2000">5</div>
+ <div class="transition:pushDown duration:500">6</div>
+ </div>
+
+#### 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.
View
@@ -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],
View
BIN logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
@@ -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

0 comments on commit 13497b3

Please sign in to comment.