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