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
22 Roo.namespace('Roo.ux');
24 Roo.ux.Slideshow = function(cfg )
28 this.numOfImages = this.slides.length;
29 if ( !this.numOfImages ) {
33 this.playButton = Roo.get(this.playButton);
34 this.pauseButton = Roo.get(this.pauseButton);
35 this.counter = Roo.get(this.counter);
36 this.caption = Roo.get(this.caption);
37 if ( this.autostart ) {
38 this.startSlideShow();
42 Roo.apply(Roo.ux.Slideshow.prototype, {
49 * @cfg {Array} of slides
53 * @cfg id/dom element counter to show the
57 * @cfg id/dom element of the caption.
61 * @cfg id/dom element for play button
65 * @cfg id/dom element of the pause button
72 swapImage: function (x,y) {
73 if (this.slides[x] ) {
74 this.slides[x].animate(
75 { opacity : { from : 0.0, to : 1.0 }},
78 this.slides[x].show();
80 if (this.slides[y] ) {
81 this.slides[y].animate(
82 { opacity : { from : 1.0, to : 0.0 }},
85 this.slides[y].show();
90 // the onload event handler that starts the fading.
91 startSlideShow: function () {
94 this.playButton && this.playButton.hide();
95 this.pauseButton && this.pauseButton.show();
103 var imageShow, imageHide;
105 imageShow = this.iImageId+1;
106 imageHide = this.iImageId;
108 if (imageShow == this.numOfImages) {
109 this.swapImage(0,imageHide);
113 this.swapImage(imageShow,imageHide);
117 this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
118 this.updatecounter();
120 this.play.defer(this.wait, this);
126 this.running = false;
127 this.playButton && this.playButton.show();
128 this.pauseButton && this.pauseButton.hide();
131 goNext: function () {
132 clearInterval(this.play);
133 $(this.playButton).appear({ duration: 0});
134 $(this.pauseButton).hide();
136 var imageShow, imageHide;
138 imageShow = this.iImageId+1;
139 imageHide = this.iImageId;
141 if (imageShow == this.numOfImages) {
142 this.swapImage(0,imageHide);
145 this.swapImage(imageShow,imageHide);
149 this.updatecounter();
152 goPrevious: function () {
153 clearInterval(this.play);
154 $(this.playButton).appear({ duration: 0});
155 $(this.pauseButton).hide();
157 var imageShow, imageHide;
159 imageShow = this.iImageId-1;
160 imageHide = this.iImageId;
162 if (this.iImageId == 0) {
163 this.swapImage(this.numOfImages-1,imageHide);
164 this.iImageId = this.numOfImages-1;
166 //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
169 this.swapImage(imageShow,imageHide);
172 //alert(imageShow + ' and ' + imageHide)
175 this.updatecounter();
178 updatecounter: function () {
182 var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
183 this.counter.update( textIn );
184 var oNewCaption = this.slides[this.iImageId].select('.image-caption', true);
185 if ( this.caption && oNewCaption.length ) {
186 this.caption.update( oNewCaption[0].innerHTML;