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