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