X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fslideshow.js;fp=include%2Fslideshow.js;h=cc312d9c1577815beedb58672a17c3a7e775a815;hp=0000000000000000000000000000000000000000;hb=224aa7103c52952fe867c36d3cb4f7217f4fbc4c;hpb=7104bfdf4b25fc5bc8e8aaf9e65e6846a731bebc

diff --git a/include/slideshow.js b/include/slideshow.js
new file mode 100644
index 0000000..cc312d9
--- /dev/null
+++ b/include/slideshow.js
@@ -0,0 +1,398 @@
+
+/**************************************************************
+
+	Script		: SlideShow
+	Version		: 1.3
+	Authors		: Samuel Birch
+	Desc		: 
+	Licence		: Open Source MIT Licence
+
+**************************************************************/
+
+var SlideShow = new Class({
+	
+	getOptions: function(){
+		return {
+			effect: 'fade', //fade|wipe|slide|random
+			duration: 2000,
+			transition: Fx.Transitions.linear,
+			direction: 'right', //top|right|bottom|left|random
+			color: false,
+			wait: 5000,
+			loop: false,
+			thumbnails: false,
+			thumbnailCls: 'outline',
+			backgroundSlider: false,
+			loadingCls: 'loading',
+			onClick: false
+		};
+	},
+
+	initialize: function(container, images, options){
+		this.setOptions(this.getOptions(), options);
+		
+		this.container = $(container);
+		this.container.setStyles({
+			position: 'relative',
+			overflow: 'hidden'
+		});
+		if(this.options.onClick){
+			this.container.addEvent('click', function(){
+				this.options.onClick(this.imageLoaded);
+			}.bind(this));
+		}
+		
+		
+		this.imagesHolder = new Element('div').setStyles({
+			position: 'absolute',
+			overflow: 'hidden',
+			top: this.container.getStyle('height'),
+			left: 0,
+			width: '0px',
+			height: '0px',
+			display: 'none'
+		}).injectInside(this.container);
+		
+		if($type(images) == 'string' && !this.options.thumbnails){
+			var imageList = [];
+			$$('.'+images).each(function(el){
+				imageList.push(el.src);
+				el.injectInside(this.imagesHolder);
+			},this);
+			this.images = imageList;
+			
+		}else if($type(images) == 'string' && this.options.thumbnails){
+			var imageList = [];
+			var srcList = [];
+			this.thumbnails = $$('.'+images);
+			this.thumbnails.each(function(el,i){
+				srcList.push(el.href);
+				imageList.push(el.getElement('img'));
+				el.href = 'javascript:;';
+				el.addEvent('click',function(){
+					this.stop();
+					this.play(i);				 
+				}.bind(this,el,i));
+			},this);
+			this.images = srcList;
+			this.thumbnailImages = imageList;
+			
+			if(this.options.backgroundSlider){
+				this.bgSlider = new BackgroundSlider(this.thumbnailImages,{mouseOver: false, duration: this.options.duration, className: this.options.thumbnailCls, padding:{top:0,right:-2,bottom:-2,left:0}});
+				this.bgSlider.set(this.thumbnailImages[0]);
+			}
+		
+		}else{
+			this.images = images;
+		}
+		
+		this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({
+			position: 'absolute',
+			top: 0,
+			left: 0,
+			zIndex: 3,
+			display: 'none',
+			width: this.container.getStyle('width'),
+			height: this.container.getStyle('height')
+		}).injectInside(this.container);
+		
+		this.oldImage = new Element('div').setStyles({
+			position: 'absolute',
+			overflow: 'hidden',
+			top: 0,
+			left: 0,
+			opacity: 0,
+			width: this.container.getStyle('width'),
+			height: this.container.getStyle('height')
+		}).injectInside(this.container);
+		
+		this.newImage = this.oldImage.clone();
+		this.newImage.injectInside(this.container);
+		
+		
+		
+		this.timer = 0;
+		this.image = -1;
+		this.imageLoaded = 0;
+		this.stopped = true;
+		this.started = false;
+		this.animating = false;
+	},
+	
+	load: function(){
+		$clear(this.timer);
+		this.loading.setStyle('display','block');
+		this.image++;
+		var img = this.images[this.image];
+		delete this.imageObj;
+		
+		doLoad = true;
+		this.imagesHolder.getElements('img').each(function(el){
+			var src = this.images[this.image];
+			if(el.src == src){
+				this.imageObj = el;
+				doLoad = false;
+				this.add = false;
+				this.show();
+			}
+		},this);
+		
+		if(doLoad){
+			this.add = true;
+			this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});
+		}
+		
+	},
+
+	show: function(add){
+		
+		if(this.add){
+			this.imageObj.injectInside(this.imagesHolder);
+		}
+		
+		this.newImage.setStyles({
+			zIndex: 1,
+			opacity: 0
+		});
+		var img = this.newImage.getElement('img');
+		if(img){
+			img.replaceWith(this.imageObj.clone());
+		}else{
+			var obj = this.imageObj.clone();
+			obj.injectInside(this.newImage);
+		}
+		this.imageLoaded = this.image;
+		this.loading.setStyle('display','none');
+		if(this.options.thumbnails){
+			
+			if(this.options.backgroundSlider){
+				var elT = this.thumbnailImages[this.image];
+				this.bgSlider.move(elT);
+				this.bgSlider.setStart(elT);
+			}else{
+				this.thumbnails.each(function(el,i){
+					el.removeClass(this.options.thumbnailCls);
+					if(i == this.image){
+						el.addClass(this.options.thumbnailCls);
+					}
+				},this);
+			}
+		}
+		this.effect();
+	},
+	
+	wait: function(){
+		this.timer = this.load.delay(this.options.wait,this);
+	},
+	
+	play: function(num){
+		if(this.stopped){
+			if(num > -1){this.image = num-1};
+			if(this.image < this.images.length){
+				this.stopped = false;
+				if(this.started){
+					this.next();
+				}else{
+					this.load();
+				}
+				this.started = true;
+			}
+		}
+	},
+	
+	stop: function(){
+		$clear(this.timer);
+		this.stopped = true;
+	},
+	
+	next: function(wait){
+		var doNext = true;
+		if(wait && this.stopped){
+			doNext = false;
+		}
+		if(this.animating){
+			doNext = false;
+		}
+		if(doNext){
+			this.cloneImage();
+			$clear(this.timer);
+			if(this.image < this.images.length-1){
+				if(wait){
+					this.wait();
+				}else{
+					this.load();	
+				}
+			}else{
+				if(this.options.loop){
+					this.image = -1;
+					if(wait){
+						this.wait();
+					}else{
+						this.load();	
+					}
+				}else{
+					this.stopped = true;
+				}
+			}
+		}
+	},
+	
+	previous: function(){
+		if(this.imageLoaded == 0){
+			this.image = this.images.length-2;	
+		}else{
+			this.image = this.imageLoaded-2;
+		}
+		this.next();
+	},
+	
+	cloneImage: function(){
+		var img = this.oldImage.getElement('img');
+		if(img){
+			img.replaceWith(this.imageObj.clone());
+		}else{
+			var obj = this.imageObj.clone();
+			obj.injectInside(this.oldImage);
+		}
+		
+		this.oldImage.setStyles({
+			zIndex: 0,
+			top: 0,
+			left: 0,
+			opacity: 1
+		});
+		
+		this.newImage.setStyles({opacity:0});
+	},
+	
+	
+	effect: function(){
+		this.animating = true;
+		this.effectObj = this.newImage.effects({
+			duration: this.options.duration,
+			transition: this.options.transition
+		});
+		
+		var myFxTypes = ['fade','wipe','slide'];
+		var myFxDir = ['top','right','bottom','left'];
+		
+		if(this.options.effect == 'fade'){
+			this.fade();
+			
+		}else if(this.options.effect == 'wipe'){
+			if(this.options.direction == 'random'){
+				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
+			}else{
+				this.setup(this.options.direction);
+			}
+			this.wipe();
+			
+		}else if(this.options.effect == 'slide'){
+			if(this.options.direction == 'random'){
+				this.setup(myFxDir[Math.floor(Math.random()*(3+1))]);
+			}else{
+				this.setup(this.options.direction);
+			}
+			this.slide();
+			
+		}else if(this.options.effect == 'random'){
+			var type = myFxTypes[Math.floor(Math.random()*(2+1))];
+			if(type != 'fade'){
+				var dir = myFxDir[Math.floor(Math.random()*(3+1))];
+				if(this.options.direction == 'random'){
+					this.setup(dir);
+				}else{
+					this.setup(this.options.direction);
+				}
+			}else{
+				this.setup();
+			}
+			this[type]();
+		}
+	},
+	
+	setup: function(dir){
+		if(dir == 'top'){
+			this.top = -this.container.getStyle('height').toInt();
+			this.left = 0;
+			this.topOut = this.container.getStyle('height').toInt();
+			this.leftOut = 0;
+			
+		}else if(dir == 'right'){
+			this.top = 0;
+			this.left = this.container.getStyle('width').toInt();
+			this.topOut = 0;
+			this.leftOut = -this.container.getStyle('width').toInt();
+			
+		}else if(dir == 'bottom'){
+			this.top = this.container.getStyle('height').toInt();
+			this.left = 0;
+			this.topOut = -this.container.getStyle('height').toInt();
+			this.leftOut = 0;
+			
+		}else if(dir == 'left'){
+			this.top = 0;
+			this.left = -this.container.getStyle('width').toInt();
+			this.topOut = 0;
+			this.leftOut = this.container.getStyle('width').toInt();
+			
+		}else{
+			this.top = 0;
+			this.left = 0;
+			this.topOut = 0;
+			this.leftOut = 0;
+		}
+	},
+	
+	fade: function(){
+		this.effectObj.start({
+			opacity: [0,1]
+		});
+		this.resetAnimation.delay(this.options.duration+90,this);
+		if(!this.stopped){
+		this.next.delay(this.options.duration+100,this,true);
+		}
+	},
+	
+	wipe: function(){
+		this.oldImage.effects({
+			duration: this.options.duration,
+			transition: this.options.transition
+		}).start({
+			top: [0,this.topOut],
+			left: [0, this.leftOut]
+		})
+		this.effectObj.start({
+			top: [this.top,0],
+			left: [this.left,0],
+			opacity: [1,1]
+		},this);
+		this.resetAnimation.delay(this.options.duration+90,this);
+		if(!this.stopped){
+		this.next.delay(this.options.duration+100,this,true);
+		}
+	},
+	
+	slide: function(){
+		this.effectObj.start({
+			top: [this.top,0],
+			left: [this.left,0],
+			opacity: [1,1]
+		},this);
+		this.resetAnimation.delay(this.options.duration+90,this);
+		if(!this.stopped){
+		this.next.delay(this.options.duration+100,this,true);
+		}
+	},
+	
+	resetAnimation: function(){
+		this.animating = false;
+	}
+	
+});
+SlideShow.implement(new Options);
+SlideShow.implement(new Events);
+
+
+/*************************************************************/
+