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