git.roojs.org Git - roojs1/blob - ux/Slideshow.js

   1 /**
   2  *
   3  *
   4  *
   5  */
   6
   7 // slideshow..
   8 var iSlideShow = new Class.create();
   9 iSlideShow.prototype = {
  10
  11         initialize : function (oArgs){
  12                 this.wait                       = oArgs.wait ? oArgs.wait : 4000;
  13                 this.start                      = oArgs.start ? oArgs.start : 0;
  14                 this.duration           = oArgs.duration ? oArgs.duration : 0.5;
  15                 this.autostart          = (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
  16                 this.slides             = oArgs.slides;
  17                 this.counter            = oArgs.counter;
  18                 this.caption            = oArgs.caption;
  19                 this.playButton         = $(oArgs.playButton ? oArgs.playButton : 'PlayButton');
  20                 this.pauseButton        = $(oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton');
  21                 this.iImageId           = this.start;
  22                 if ( this.slides ) {
  23                         this.numOfImages        = this.slides.length;
  24                         if ( !this.numOfImages ) {
  25                                 alert('No slides?');
  26                         }
  27                 }
  28                 if ( this.autostart ) {
  29                         this.startSlideShow();
  30                 }
  31         },
  32
  33         // The Fade Function
  34         swapImage: function (x,y) {
  35                 $(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
  36                 $(this.slides[y]) && $(this.slides[y]).fade({duration: this.duration });
  37         },
  38
  39         // the onload event handler that starts the fading.
  40         startSlideShow: function () {
  41         var _t  = this;
  42                 window.setInterval(function () {
  43             _t.play() },this.wait);
  44                 this.playButton && this.playButton.hide();
  45                 this.pauseButton && this.pauseButton.appear({ duration: 0});
  46
  47                 this.updatecounter();
  48
  49         },
  50
  51         play: function () {
  52
  53                 var imageShow, imageHide;
  54
  55                 imageShow = this.iImageId+1;
  56                 imageHide = this.iImageId;
  57
  58                 if (imageShow == this.numOfImages) {
  59                         this.swapImage(0,imageHide);
  60                         this.iImageId = 0;
  61                 } else {
  62                         this.swapImage(imageShow,imageHide);
  63                         this.iImageId++;
  64                 }
  65
  66                 this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
  67                 this.updatecounter();
  68         },
  69
  70         stop: function  () {
  71                 clearInterval(this.play);
  72                 this.playButton && this.playButton.appear({ duration: 0});
  73                 this.pauseButton && this.pauseButton.hide();
  74         },
  75
  76         goNext: function () {
  77                 clearInterval(this.play);
  78                 $(this.playButton).appear({ duration: 0});
  79                 $(this.pauseButton).hide();
  80
  81                 var imageShow, imageHide;
  82
  83                 imageShow = this.iImageId+1;
  84                 imageHide = this.iImageId;
  85
  86                 if (imageShow == this.numOfImages) {
  87                         this.swapImage(0,imageHide);
  88                         this.iImageId = 0;
  89                 } else {
  90                         this.swapImage(imageShow,imageHide);
  91                         this.iImageId++;
  92                 }
  93
  94                 this.updatecounter();
  95         },
  96
  97         goPrevious: function () {
  98                 clearInterval(this.play);
  99                 $(this.playButton).appear({ duration: 0});
 100                 $(this.pauseButton).hide();
 101
 102                 var imageShow, imageHide;
 103
 104                 imageShow = this.iImageId-1;
 105                 imageHide = this.iImageId;
 106
 107                 if (this.iImageId == 0) {
 108                         this.swapImage(this.numOfImages-1,imageHide);
 109                         this.iImageId = this.numOfImages-1;
 110
 111                         //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
 112
 113                 } else {
 114                         this.swapImage(imageShow,imageHide);
 115                         this.iImageId--;
 116
 117                         //alert(imageShow + ' and ' + imageHide)
 118                 }
 119
 120                 this.updatecounter();
 121         },
 122
 123         updatecounter: function () {
 124                 var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
 125                 $(this.counter) && ( $(this.counter).innerHTML = textIn );
 126                 if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
 127                         $(this.caption).innerHTML = oNewCaption.innerHTML;
 128                 }
 129         }
 130 }
 131 Event.observe(window, 'load', function(){
 132         if ($$('.category-slide').length < 2) {
 133             if (!$$('.category-slide').length) {
 134                 return;
 135             }
 136             $$('.category-slide')[0].appear( { duration : 1 });
 137             return;
 138         }
 139         oMySlides = new iSlideShow({
 140                                 autostart       : true,         // optional, boolean (default:true)
 141                                 start           : 0,            // optional, slides[start] (default:0)
 142                                 wait            : 4000,         // optional, milliseconds (default:4s)
 143                                 slides          : $$('.category-slide'),
 144                                 counter         : 'counter-div-id', // optional...
 145                                 caption         : 'caption-div-id', // optional...
 146                                 playButton      : 'PlayButton',         // optional (default:playButton)
 147                                 pauseButton     : 'PauseButton',        // optional (default:PauseButton)
 148                         });
 149              $$('.category-slide')[0].appear( { duration : 1 });
 150                         // oMySlides.startSlideShow();
 151 });
 152
 153