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