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, {
49 * @config id/dom element counter to show the
53 * @config id/dom element of the caption.
57 * @config id/dom element for play button
61 * @config id/dom element of the pause button
68 swapImage: function (x,y) {
69 if (this.slides[x] ) {
70 this.slides[x].animate(
71 { opacity : { from : 0.0, to : 1.0 }},
74 this.slides[x].show();
76 if (this.slides[y] ) {
77 this.slides[y].animate(
78 { opacity : { from : 1.0, to : 0.0 }},
81 this.slides[y].show();
86 // the onload event handler that starts the fading.
87 startSlideShow: function () {
90 this.play.defer(this.wait, this);
92 this.playButton && this.playButton.hide();
93 this.pauseButton && this.pauseButton.show();
101 var imageShow, imageHide;
103 imageShow = this.iImageId+1;
104 imageHide = this.iImageId;
106 if (imageShow == this.numOfImages) {
107 this.swapImage(0,imageHide);
111 this.swapImage(imageShow,imageHide);
115 this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
116 this.updatecounter();
117 this.play.defer(this.wait, this);
121 clearInterval(this.play);
122 this.playButton && this.playButton.appear({ duration: 0});
123 this.pauseButton && this.pauseButton.hide();
126 goNext: function () {
127 clearInterval(this.play);
128 $(this.playButton).appear({ duration: 0});
129 $(this.pauseButton).hide();
131 var imageShow, imageHide;
133 imageShow = this.iImageId+1;
134 imageHide = this.iImageId;
136 if (imageShow == this.numOfImages) {
137 this.swapImage(0,imageHide);
140 this.swapImage(imageShow,imageHide);
144 this.updatecounter();
147 goPrevious: function () {
148 clearInterval(this.play);
149 $(this.playButton).appear({ duration: 0});
150 $(this.pauseButton).hide();
152 var imageShow, imageHide;
154 imageShow = this.iImageId-1;
155 imageHide = this.iImageId;
157 if (this.iImageId == 0) {
158 this.swapImage(this.numOfImages-1,imageHide);
159 this.iImageId = this.numOfImages-1;
161 //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
164 this.swapImage(imageShow,imageHide);
167 //alert(imageShow + ' and ' + imageHide)
170 this.updatecounter();
173 updatecounter: function () {
177 var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
178 this.counter.update( textIn );
179 var oNewCaption = this.slides[this.iImageId]).select('.image-caption', true)
180 if ( this.caption && oNewCaption.length ) {
181 this.caption.update( oNewCaption[0].innerHTML;