1 //<script type="text/javascript">
3 * Slideshow - based on a prototype one..
8 Roo.onReady( function()
10 // use a dom selector to define slides..
11 var slides = Roo.DomQuery.select('.category-slide');
13 oMySlides = new Roo.ux.Slideshow({
20 * @class Roo.ux.Slideshow
23 Roo.ux.Slideshow = function(cfg )
27 this.numOfImages = this.slides.length;
28 if ( !this.numOfImages ) {
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();
41 Roo.apply(Roo.ux.Slideshow.prototype, {
48 * @cfg {Array} of slides
52 * @cfg id/dom element counter to show the
56 * @cfg id/dom element of the caption.
60 * @cfg id/dom element for play button
64 * @cfg id/dom element of the pause button
71 swapImage: function (x,y) {
72 if (this.slides[x] ) {
73 this.slides[x].animate(
74 { opacity : { from : 0.0, to : 1.0 }},
77 this.slides[x].show();
79 if (this.slides[y] ) {
80 this.slides[y].animate(
81 { opacity : { from : 1.0, to : 0.0 }},
84 this.slides[y].show();
89 // the onload event handler that starts the fading.
90 startSlideShow: function () {
93 this.playButton && this.playButton.hide();
94 this.pauseButton && this.pauseButton.show();
102 var imageShow, imageHide;
104 imageShow = this.iImageId+1;
105 imageHide = this.iImageId;
107 if (imageShow == this.numOfImages) {
108 this.swapImage(0,imageHide);
112 this.swapImage(imageShow,imageHide);
116 this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
117 this.updatecounter();
119 this.play.defer(this.wait, this);
125 this.running = false;
126 this.playButton && this.playButton.show();
127 this.pauseButton && this.pauseButton.hide();
130 goNext: function () {
131 clearInterval(this.play);
132 $(this.playButton).appear({ duration: 0});
133 $(this.pauseButton).hide();
135 var imageShow, imageHide;
137 imageShow = this.iImageId+1;
138 imageHide = this.iImageId;
140 if (imageShow == this.numOfImages) {
141 this.swapImage(0,imageHide);
144 this.swapImage(imageShow,imageHide);
148 this.updatecounter();
151 goPrevious: function () {
152 clearInterval(this.play);
153 $(this.playButton).appear({ duration: 0});
154 $(this.pauseButton).hide();
156 var imageShow, imageHide;
158 imageShow = this.iImageId-1;
159 imageHide = this.iImageId;
161 if (this.iImageId == 0) {
162 this.swapImage(this.numOfImages-1,imageHide);
163 this.iImageId = this.numOfImages-1;
165 //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
168 this.swapImage(imageShow,imageHide);
171 //alert(imageShow + ' and ' + imageHide)
174 this.updatecounter();
177 updatecounter: function () {
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;