make image containers initially invisible

[mkgallery.git] / include / show.js

diff --git a/include/show.js b/include/show.js
index 065898393fb3dcec995800df564f7961041726d9..248dee6829f6d755a851ea387c5268e47dddc56e 100644 (file)
--- 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,
                        cbExit: function(){ alert('show exit undefined'); },
                        percentage: 98,
                        delay: 5000,

+                       fxduration: 200,

                }
        },
 
                }
        },
 


@@ -60,15 +61,18 @@ var Show = new Class({
                        next: {},
                };
                this.updatecoords();
                        next: {},
                };
                this.updatecoords();

-               this.previd = -1;
+               this.prevdisplay = new Element('img').
+                       setStyle('opacity', 0).
+                       injectInside(this.container.container);

                this.ondisplay = new Element('img').
                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,
                        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,
                        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); }
 
        exit: function(){
                if (this.isplaying) { $clear(this.timer); }

+               this.prevdisplay.setStyle('display', 'none');
+               this.ondisplay.setStyle('display', 'none');

                this.stopfx();
                this.options.cbExit();
        },
                this.stopfx();
                this.options.cbExit();
        },


@@ -141,7 +147,6 @@ var Show = new Class({
 
        show: function(id){
                /* alert('called show.show('+id+')'); */
 
        show: function(id){
                /* alert('called show.show('+id+')'); */

-               this.previd = this.currentid;

                this.currentid = id;
                var newcache = {
                        prev: (id > 0)?this.prepare(id-1):{},
                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);
                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;
                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);
                }
                if (this.isplaying) {
                        this.timer = this.autonext.delay(this.delay,this);
                }


@@ -269,6 +294,7 @@ var Show = new Class({
        },
 
        stopfx: function(){
        },
 
        stopfx: function(){

+               if (this.fx) this.fx.cancel();

        },
 
        updatecoords: function(){
        },
 
        updatecoords: function(){