+//<script type="text/javascript">
/**
- *
+ * 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');
-// slideshow..
-var iSlideShow = new Class.create();
-iSlideShow.prototype = {
-
- initialize : function (oArgs){
- this.wait = oArgs.wait ? oArgs.wait : 4000;
- this.start = oArgs.start ? oArgs.start : 0;
- this.duration = oArgs.duration ? oArgs.duration : 0.5;
- this.autostart = (typeof(oArgs.autostart)=='undefined') ? true : oArgs.autostart;
- this.slides = oArgs.slides;
- this.counter = oArgs.counter;
- this.caption = oArgs.caption;
- this.playButton = $(oArgs.playButton ? oArgs.playButton : 'PlayButton');
- this.pauseButton = $(oArgs.pauseButton ? oArgs.pauseButton : 'PauseButton');
- this.iImageId = this.start;
- if ( this.slides ) {
- this.numOfImages = this.slides.length;
- if ( !this.numOfImages ) {
- alert('No slides?');
- }
- }
- if ( this.autostart ) {
- this.startSlideShow();
- }
- },
-
+Roo.ux.Slideshow = function(cfg )
+{
+ Roo.apply(this, cfg);
+ 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 : 1,
+ autostart : true ,
+ /**
+ * @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