* Slideshow - based on a prototype one..
*
*
+ * usage:
+ *
+Roo.onReady( function()
+{
+ // use a dom selector to define slides..
+ var slides = Roo.DomQuery.select('.category-slide', true);
+
+ oMySlides = new Roo.ux.Slideshow({
+ slides : slides,
+ });
+
+});
+ *
+ *
+ * @class Roo.ux.Slideshow
*/
+Roo.namespace('Roo.ux');
-Roo.ux.Slideshow = function(cfg ) {
+Roo.ux.Slideshow = function(cfg )
+{
Roo.apply(this, cfg);
- if ( this.slides ) {
- this.numOfImages = this.slides.length;
- if ( !this.numOfImages ) {
- alert('No slides?');
- }
+ if ( !this.slides || !this.slides.length) {
+ return;
+ }
+ if (this.slides.length == 1) {
+ this.slides[0].setVisibilityMode(Roo.Element.DISPLAY);
+ this.slides[0].show();
+ return;
+
}
+
this.playButton = Roo.get(this.playButton);
this.pauseButton = Roo.get(this.pauseButton);
+ this.counter = Roo.get(this.counter);
+ this.caption = Roo.get(this.caption);
if ( this.autostart ) {
this.startSlideShow();
}
}
+
Roo.apply(Roo.ux.Slideshow.prototype, {
- wait : 4000
- start : 0
- duration : 0.5,
+ wait : 4000,
+ start : 0,
+ duration : 1,
autostart : true ,
- slides : false
- counter : 0,
- caption : '',
+ /**
+ * @cfg {Array} of slides
+ */
+ slides : false,
+ /**
+ * @cfg id/dom element counter to show the
+ */
+ counter : false,
+ /**
+ * @cfg id/dom element of the caption.
+ */
+ caption : false,
+ /**
+ * @cfg id/dom element for play button
+ */
playButton : false,
+ /**
+ * @cfg id/dom element of the pause button
+ */
pauseButton : false,
iImageId : 0,
-
+ running : false,
// The Fade Function
- swapImage: function (x,y) {
- $(this.slides[x]) && $(this.slides[x]).appear({ duration: this.duration });
- $(this.slides[y]) && $(this.slides[y]).fade({duration: this.duration });
+ swapImage: function (x,y) {
+ if (this.slides[x] ) {
+ this.slides[x].animate(
+ { opacity : { from : 0.0, to : 1.0 }},
+ this.duration
+ );
+ this.slides[x].show();
+ }
+ if (this.slides[y] ) {
+ this.slides[y].animate(
+ { opacity : { from : 1.0, to : 0.0 }},
+ this.duration
+ );
+ this.slides[y].show();
+ }
+
},
// the onload event handler that starts the fading.
startSlideShow: function () {
var _t = this;
- window.setInterval(function () {
- _t.play() },this.wait);
+ this.running = true;
this.playButton && this.playButton.hide();
- this.pauseButton && this.pauseButton.appear({ duration: 0});
+ this.pauseButton && this.pauseButton.show();
this.updatecounter();
-
+ this.slides[0].setStyle({ opacity : 1.0 });
+ this.slides[0].show();
+ this.play.defer(this.wait, this);
},
play: function () {
imageShow = this.iImageId+1;
imageHide = this.iImageId;
- if (imageShow == this.numOfImages) {
- this.swapImage(0,imageHide);
+ if (imageShow+1 > this.slides.length) {
+ this.swapImage(0,imageHide);
+
this.iImageId = 0;
} else {
this.swapImage(imageShow,imageHide);
this.iImageId++;
}
- this.textIn = this.iImageId+1 + ' of ' + this.numOfImages;
+ this.textIn = this.iImageId+1 + ' of ' + this.slides.length;
this.updatecounter();
+
+ if (this.running) {
+ this.play.defer(this.wait, this);
+ }
+
},
stop: function () {
- clearInterval(this.play);
- this.playButton && this.playButton.appear({ duration: 0});
+ this.running = false;
+ this.playButton && this.playButton.show();
this.pauseButton && this.pauseButton.hide();
},
-
+ /*
goNext: function () {
clearInterval(this.play);
$(this.playButton).appear({ duration: 0});
this.updatecounter();
},
-
+ */
updatecounter: function () {
- var textIn = this.iImageId+1 + ' of ' + this.numOfImages;
- $(this.counter) && ( $(this.counter).innerHTML = textIn );
- if ( $(this.caption) && ( oNewCaption = $(this.slides[this.iImageId]).down('.image-caption') ) ) {
- $(this.caption).innerHTML = oNewCaption.innerHTML;
- }
- }
-}
-Event.observe(window, 'load', function(){
- if ($$('.category-slide').length < 2) {
- if (!$$('.category-slide').length) {
- return;
- }
- $$('.category-slide')[0].appear( { duration : 1 });
+ if (!this.counter) {
return;
}
- oMySlides = new iSlideShow({
- autostart : true, // optional, boolean (default:true)
- start : 0, // optional, slides[start] (default:0)
- wait : 4000, // optional, milliseconds (default:4s)
- slides : $$('.category-slide'),
- counter : 'counter-div-id', // optional...
- caption : 'caption-div-id', // optional...
- playButton : 'PlayButton', // optional (default:playButton)
- pauseButton : 'PauseButton', // optional (default:PauseButton)
- });
- $$('.category-slide')[0].appear( { duration : 1 });
- // oMySlides.startSlideShow();
+ var textIn = this.iImageId+1 + ' of ' + this.slides.length;
+ this.counter.update( textIn );
+ var oNewCaption = this.slides[this.iImageId].select('.image-caption', true);
+ if ( this.caption && oNewCaption.length ) {
+ this.caption.update( oNewCaption[0].innerHTML);
+ }
+ }
});
\ No newline at end of file
projects / roojs1 / blobdiff