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