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