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

   1 //<script type="text/javascript">
   2 /**
   3  * Slideshow  - based on a prototype one..
   4  *
   5  *
   6  * usage:
   7  *
   8 Roo.onReady( function()
   9 {
  10    // use a dom selector to define slides..
  11     var slides = Roo.DomQuery.select('.category-slide', true);
  12
  13     oMySlides = new Roo.ux.Slideshow({
  14         slides          : slides,
  15     });
  16
  17 });
  18  *
  19  *
  20  * @class Roo.ux.Slideshow
  21  */
  22 Roo.namespace('Roo.ux');
  23
  24 Roo.ux.Slideshow = function(cfg )
  25 {
  26     Roo.apply(this, cfg);
  27     if ( !this.slides || !this.slides.length) {
  28         return;
  29     }
  30     if (this.slides.length == 1) {
  31         this.slides[0].setVisibilityMode(Roo.Element.DISPLAY);
  32         this.slides[0].show();
  33         return;
  34
  35     }
  36
  37     this.playButton = Roo.get(this.playButton);
  38     this.pauseButton = Roo.get(this.pauseButton);
  39     this.counter = Roo.get(this.counter);
  40     this.caption = Roo.get(this.caption);
  41     if ( this.autostart ) {
  42         this.startSlideShow();
  43     }
  44 }
  45
  46 Roo.apply(Roo.ux.Slideshow.prototype, {
  47
  48     wait                        : 4000,
  49         start                   : 0,
  50         duration                : 1,
  51         autostart               : true ,
  52      /**
  53      * @cfg {Array} of slides
  54      */
  55         slides              : false,
  56     /**
  57      * @cfg id/dom element counter to show the
  58      */
  59         counter             : false,
  60      /**
  61      * @cfg id/dom element of the caption.
  62      */
  63         caption             : false,
  64      /**
  65      * @cfg id/dom element for play button
  66      */
  67         playButton              : false,
  68     /**
  69      * @cfg id/dom element of the pause button
  70      */
  71         pauseButton         : false,
  72         iImageId                : 0,
  73     running         : false,
  74
  75         // The Fade Function
  76         swapImage: function (x,y) {
  77         if (this.slides[x] ) {
  78             this.slides[x].animate(
  79                 { opacity : { from : 0.0, to : 1.0 }},
  80                 this.duration
  81             );
  82             this.slides[x].show();
  83         }
  84         if (this.slides[y] ) {
  85             this.slides[y].animate(
  86                 { opacity : { from : 1.0, to : 0.0 }},
  87                 this.duration
  88             );
  89             this.slides[y].show();
  90         }
  91
  92         },
  93
  94         // the onload event handler that starts the fading.
  95         startSlideShow: function () {
  96         var _t  = this;
  97         this.running = true;
  98                 this.playButton && this.playButton.hide();
  99                 this.pauseButton && this.pauseButton.show();
 100
 101                 this.updatecounter();
 102         this.slides[0].setStyle({ opacity : 1.0 });
 103         this.slides[0].show();
 104             this.play.defer(this.wait, this);
 105         },
 106
 107         play: function () {
 108
 109                 var imageShow, imageHide;
 110
 111                 imageShow = this.iImageId+1;
 112                 imageHide = this.iImageId;
 113
 114                 if (imageShow+1  > this.slides.length) {
 115                         this.swapImage(0,imageHide);
 116
 117                         this.iImageId = 0;
 118                 } else {
 119                         this.swapImage(imageShow,imageHide);
 120                         this.iImageId++;
 121                 }
 122
 123                 this.textIn = this.iImageId+1 + ' of ' + this.slides.length;
 124                 this.updatecounter();
 125
 126         if (this.running) {
 127             this.play.defer(this.wait, this);
 128         }
 129
 130         },
 131
 132         stop: function  () {
 133                 this.running = false;
 134                 this.playButton && this.playButton.show();
 135                 this.pauseButton && this.pauseButton.hide();
 136         },
 137         /*
 138         goNext: function () {
 139                 clearInterval(this.play);
 140                 $(this.playButton).appear({ duration: 0});
 141                 $(this.pauseButton).hide();
 142
 143                 var imageShow, imageHide;
 144
 145                 imageShow = this.iImageId+1;
 146                 imageHide = this.iImageId;
 147
 148                 if (imageShow == this.numOfImages) {
 149                         this.swapImage(0,imageHide);
 150                         this.iImageId = 0;
 151                 } else {
 152                         this.swapImage(imageShow,imageHide);
 153                         this.iImageId++;
 154                 }
 155
 156                 this.updatecounter();
 157         },
 158
 159         goPrevious: function () {
 160                 clearInterval(this.play);
 161                 $(this.playButton).appear({ duration: 0});
 162                 $(this.pauseButton).hide();
 163
 164                 var imageShow, imageHide;
 165
 166                 imageShow = this.iImageId-1;
 167                 imageHide = this.iImageId;
 168
 169                 if (this.iImageId == 0) {
 170                         this.swapImage(this.numOfImages-1,imageHide);
 171                         this.iImageId = this.numOfImages-1;
 172
 173                         //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
 174
 175                 } else {
 176                         this.swapImage(imageShow,imageHide);
 177                         this.iImageId--;
 178
 179                         //alert(imageShow + ' and ' + imageHide)
 180                 }
 181
 182                 this.updatecounter();
 183         },
 184         */
 185         updatecounter: function () {
 186         if (!this.counter) {
 187             return;
 188         }
 189                 var textIn = this.iImageId+1 + ' of ' + this.slides.length;
 190                 this.counter.update( textIn );
 191         var oNewCaption = this.slides[this.iImageId].select('.image-caption', true);
 192                 if ( this.caption &&  oNewCaption.length ) {
 193                         this.caption.update( oNewCaption[0].innerHTML);
 194                 }
 195         }
 196 });
 197
 198