X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fshow.js;h=248dee6829f6d755a851ea387c5268e47dddc56e;hp=065898393fb3dcec995800df564f7961041726d9;hb=283ceff6555c129d7e03f639aa8a3e158dd2e1ac;hpb=84036a64eb5be457cfa21450ddc7da596eec8bbc;ds=sidebyside

diff --git a/include/show.js b/include/show.js
index 0658983..248dee6 100644
--- a/include/show.js
+++ b/include/show.js
@@ -43,6 +43,7 @@ var Show = new Class({
 			cbExit: function(){ alert('show exit undefined'); },
 			percentage: 98,
 			delay: 5000,
+			fxduration: 200,
 		}
 	},
 
@@ -60,15 +61,18 @@ var Show = new Class({
 			next: {},
 		};
 		this.updatecoords();
-		this.previd = -1;
+		this.prevdisplay = new Element('img').
+			setStyle('opacity', 0).
+			injectInside(this.container.container);
 		this.ondisplay = new Element('img').
+			setStyle('opacity', 0).
 			injectInside(this.container.container);
 		this.loadingdiv = new Element('div').
 		addClass('loading').setStyles({
 			position: 'absolute',
 			top: 0,
 			left: 0,
-			zIndex: 3,
+			zIndex: 4,
 			display: 'none',
 			width: this.coords.width,
 			height: this.coords.height,
@@ -119,6 +123,8 @@ var Show = new Class({
 
 	exit: function(){
 		if (this.isplaying) { $clear(this.timer); }
+		this.prevdisplay.setStyle('display', 'none');
+		this.ondisplay.setStyle('display', 'none');
 		this.stopfx();
 		this.options.cbExit();
 	},
@@ -141,7 +147,6 @@ var Show = new Class({
 
 	show: function(id){
 		/* alert('called show.show('+id+')'); */
-		this.previd = this.currentid;
 		this.currentid = id;
 		var newcache = {
 			prev: (id > 0)?this.prepare(id-1):{},
@@ -218,8 +223,28 @@ var Show = new Class({
 		var newstyle = this.calcsize(cachel);
 		var newimg = cachel.img.clone();
 		newimg.setStyles(newstyle);
+		newimg.setStyles({
+			zIndex: 3,
+			opacity: 0,
+		});
+		this.prevdisplay.dispose();
+		this.prevdisplay = this.ondisplay.clone().
+		setStyle('zIndex', 2).injectInside(this.container.container);
 		newimg.replaces(this.ondisplay);
 		this.ondisplay = newimg;
+		this.effect();
+	},
+
+	effect: function(){
+		this.fx = new Fx.Tween(this.ondisplay, {
+			duration: this.options.fxduration,
+		});
+		this.fx.addEvent('complete',this.displaycomplete.bind(this));
+		this.fx.start('opacity', 0, 1);
+	},
+
+	displaycomplete: function(){
+		this.prevdisplay.setStyle('display', 'none');
 		if (this.isplaying) {
 			this.timer = this.autonext.delay(this.delay,this);
 		}
@@ -269,6 +294,7 @@ var Show = new Class({
 	},
 
 	stopfx: function(){
+		if (this.fx) this.fx.cancel();
 	},
 
 	updatecoords: function(){