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     Roo.apply(this, cfg);
  25     if ( this.slides ) {
  26         this.numOfImages        = this.slides.length;
  27         if ( !this.numOfImages ) {
  28             alert('No slides?');
  29         }
  30     }
  31     this.playButton = Roo.get(this.playButton);
  32     this.pauseButton = Roo.get(this.pauseButton);
  33     if ( this.autostart ) {
  34         this.startSlideShow();
  35     }
  36 }
  37 Roo.apply(Roo.ux.Slideshow.prototype, {
  38
  39     wait                        : 4000
  40         start                   : 0
  41         duration                : 0.5,
  42         autostart               : true ,
  43         slides              : false
  44         counter             : 0,
  45         caption             : '',
  46         playButton              : false,
  47         pauseButton         : false,
  48         iImageId                : 0,
  49
  50
  51         // The Fade Function
  52         swapImage: function (x,y) {
  53                 $(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
  54                 $(this.slides[y]) && $(this.slides[y]).fade({duration: this.duration });
  55         },
  56
  57         // the onload event handler that starts the fading.
  58         startSlideShow: function () {
  59         var _t  = this;
  60                 window.setInterval(function () {
  61             _t.play() },this.wait);
  62                 this.playButton && this.playButton.hide();
  63                 this.pauseButton && this.pauseButton.appear({ duration: 0});
  64
  65                 this.updatecounter();
  66
  67         },
  68
  69         play: function () {
  70
  71                 var imageShow, imageHide;
  72
  73                 imageShow = this.iImageId+1;
  74                 imageHide = this.iImageId;
  75
  76                 if (imageShow == this.numOfImages) {
  77                         this.swapImage(0,imageHide);
  78                         this.iImageId = 0;
  79                 } else {
  80                         this.swapImage(imageShow,imageHide);
  81                         this.iImageId++;
  82                 }
  83
  84                 this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
  85                 this.updatecounter();
  86         },
  87
  88         stop: function  () {
  89                 clearInterval(this.play);
  90                 this.playButton && this.playButton.appear({ duration: 0});
  91                 this.pauseButton && this.pauseButton.hide();
  92         },
  93
  94         goNext: function () {
  95                 clearInterval(this.play);
  96                 $(this.playButton).appear({ duration: 0});
  97                 $(this.pauseButton).hide();
  98
  99                 var imageShow, imageHide;
 100
 101                 imageShow = this.iImageId+1;
 102                 imageHide = this.iImageId;
 103
 104                 if (imageShow == this.numOfImages) {
 105                         this.swapImage(0,imageHide);
 106                         this.iImageId = 0;
 107                 } else {
 108                         this.swapImage(imageShow,imageHide);
 109                         this.iImageId++;
 110                 }
 111
 112                 this.updatecounter();
 113         },
 114
 115         goPrevious: function () {
 116                 clearInterval(this.play);
 117                 $(this.playButton).appear({ duration: 0});
 118                 $(this.pauseButton).hide();
 119
 120                 var imageShow, imageHide;
 121
 122                 imageShow = this.iImageId-1;
 123                 imageHide = this.iImageId;
 124
 125                 if (this.iImageId == 0) {
 126                         this.swapImage(this.numOfImages-1,imageHide);
 127                         this.iImageId = this.numOfImages-1;
 128
 129                         //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
 130
 131                 } else {
 132                         this.swapImage(imageShow,imageHide);
 133                         this.iImageId--;
 134
 135                         //alert(imageShow + ' and ' + imageHide)
 136                 }
 137
 138                 this.updatecounter();
 139         },
 140
 141         updatecounter: function () {
 142                 var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
 143                 $(this.counter) && ( $(this.counter).innerHTML = textIn );
 144                 if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
 145                         $(this.caption).innerHTML = oNewCaption.innerHTML;
 146                 }
 147         }
 148 }
 149
 150