js/fader.js

   1 // ------------------------------------------------------------------
   2 // AUTHOR: Ryan J. Salva
   3 // MODIFIED: December 22, 2007
   4 //
   5 // DESCRIPTION:
   6 // creates a single, rotating image on a page
   7 //
   8 // IMPLEMENTATION:
   9 // <div id="Container">
  10 // <img src="1.jpg" /><img src="2.jpg" /><img src="3.gif" />
  11 // </div>
  12 // <script type="text/javascript">
  13 // window.addEvent('domready',function() {
  14 // var f = new Fader('Container');
  15 // f.start();
  16 // });
  17 // </script>
  18
  19
  20 var Fader = new Class({
  21         Implements: Options,
  22         options: {
  23                 pause: 5000,
  24                 duration: 1000,
  25                 loop: true,
  26                 onComplete: Class.empty,
  27                 onStart: Class.empty
  28         },
  29         initialize: function(container,options) {
  30                 this.setOptions(options);
  31                 this.container = $(container);
  32                 this.imgs = this.container.getElements('img');
  33                 this.imgs.setStyles({
  34                         'position':'absolute',
  35                         'top':0,
  36                         'left':0,
  37                         'opacity':0
  38                 });
  39                 this.imgs[0].setStyle('opacity',1);
  40                 this.el = new Element('div',{'styles': {
  41                         'position':'relative'
  42             }});
  43             this.el.injectInside(this.container);
  44             this.el.adopt(this.imgs);
  45                 this.next = 0;
  46                 this.start();
  47         },
  48         start: function() {
  49                 this.periodical = this.show.bind(this).periodical(this.options.pause);
  50         },
  51         stop: function() {
  52                 $clear(this.periodical);
  53         },
  54         show: function() {
  55                 if (!this.options.loop && this.next==this.imgs.length-1) this.stop();
  56                 this.next = (this.next==this.imgs.length-1)?0:this.next+1;
  57                 var prev = (this.next==0)?this.imgs.length-1:this.next-1;
  58
  59                 this.imgs[this.next].fade('in');
  60                 this.imgs[prev].fade('out');
  61         }
  62 });