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', true);
13 oMySlides = new Roo.ux.Slideshow({
20 * @class Roo.ux.Slideshow
22 Roo.namespace('Roo.ux');
24 Roo.ux.Slideshow = function(cfg )
27 if ( !this.slides || !this.slides.length) {
30 if (this.slides.length == 1) {
31 this.slides[0].setVisibilityMode(Roo.Element.DISPLAY);
32 this.slides[0].show();
37 this.playButton = Roo.get(this.playButton);
38 this.pauseButton = Roo.get(this.pauseButton);
39 this.counter = Roo.get(this.counter);
40 this.caption = Roo.get(this.caption);
41 if ( this.autostart ) {
42 this.startSlideShow();
46 Roo.apply(Roo.ux.Slideshow.prototype, {
53 * @cfg {Array} of slides
57 * @cfg id/dom element counter to show the
61 * @cfg id/dom element of the caption.
65 * @cfg id/dom element for play button
69 * @cfg id/dom element of the pause button
76 swapImage: function (x,y) {
77 if (this.slides[x] ) {
78 this.slides[x].animate(
79 { opacity : { from : 0.0, to : 1.0 }},
82 this.slides[x].show();
84 if (this.slides[y] ) {
85 this.slides[y].animate(
86 { opacity : { from : 1.0, to : 0.0 }},
89 this.slides[y].show();
94 // the onload event handler that starts the fading.
95 startSlideShow: function () {
98 this.playButton && this.playButton.hide();
99 this.pauseButton && this.pauseButton.show();
101 this.updatecounter();
102 this.slides[0].setStyle({ opacity : 1.0 });
103 this.slides[0].show();
104 this.play.defer(this.wait, this);
109 var imageShow, imageHide;
111 imageShow = this.iImageId+1;
112 imageHide = this.iImageId;
114 if (imageShow+1 > this.slides.length) {
115 this.swapImage(0,imageHide);
119 this.swapImage(imageShow,imageHide);
123 this.textIn = this.iImageId+1 + ' of ' + this.slides.length;
124 this.updatecounter();
127 this.play.defer(this.wait, this);
133 this.running = false;
134 this.playButton && this.playButton.show();
135 this.pauseButton && this.pauseButton.hide();
138 goNext: function () {
139 clearInterval(this.play);
140 $(this.playButton).appear({ duration: 0});
141 $(this.pauseButton).hide();
143 var imageShow, imageHide;
145 imageShow = this.iImageId+1;
146 imageHide = this.iImageId;
148 if (imageShow == this.numOfImages) {
149 this.swapImage(0,imageHide);
152 this.swapImage(imageShow,imageHide);
156 this.updatecounter();
159 goPrevious: function () {
160 clearInterval(this.play);
161 $(this.playButton).appear({ duration: 0});
162 $(this.pauseButton).hide();
164 var imageShow, imageHide;
166 imageShow = this.iImageId-1;
167 imageHide = this.iImageId;
169 if (this.iImageId == 0) {
170 this.swapImage(this.numOfImages-1,imageHide);
171 this.iImageId = this.numOfImages-1;
173 //alert(NumOfImages-1 + ' and ' + imageHide + ' i=' + i)
176 this.swapImage(imageShow,imageHide);
179 //alert(imageShow + ' and ' + imageHide)
182 this.updatecounter();
185 updatecounter: function () {
189 var textIn = this.iImageId+1 + ' of ' + this.slides.length;
190 this.counter.update( textIn );
191 var oNewCaption = this.slides[this.iImageId].select('.image-caption', true);
192 if ( this.caption && oNewCaption.length ) {
193 this.caption.update( oNewCaption[0].innerHTML);