take care of showing the "loading" animation, at the right place

[mkgallery.git] / include / show.js

diff --git a/include/show.js b/include/show.js
index 4bcd28ea0c758aefe48159e620ca23ae239a465f..c333249931cf168e53d31d43dad839eef4b2603f 100644 (file)
--- a/include/show.js
+++ b/include/show.js
@@ -60,11 +60,22 @@ var Show = new Class({
                        curr: {},
                        next: {},
                };
+/*
+ *  thescripts.com/forum/thread170365.html
+ */
+               var hashpos = document.URL.search(/#/);
+               if (hashpos > 0) {
+                       this.baseurl = document.URL.slice(0,hashpos);
+               } else {
+                       this.baseurl = document.URL
+               }
+
                this.updatecoords();
                this.prevdisplay = new Element('img').
-                       injectInside(this.container.container);
-               this.ondisplay = new Element('img').
-                       injectInside(this.container.container);
+                       setStyle('opacity', 0);
+               this.container.grab(this.prevdisplay);
+               this.ondisplay = this.prevdisplay.clone();
+               this.container.grab(this.ondisplay);
                this.loadingdiv = new Element('div').
                addClass('loading').setStyles({
                        position: 'absolute',
@@ -74,7 +85,8 @@ var Show = new Class({
                        display: 'none',
                        width: this.coords.width,
                        height: this.coords.height,
-               }).injectInside(this.container.container);
+               });
+               this.container.grab(this.loadingdiv);
 
                window.addEvent('resize', this.resizer.bind(this))
        },
@@ -91,17 +103,18 @@ var Show = new Class({
        /* prev, play, stop, next, exit, comm are methods for button presses */
 
        prev: function(){
+               this.cleartimer();
+               this.stopfx();
                if (this.currentid > 0) {
                        this.show(this.currentid-1);
                } else {
-                       alert('show.prev called beyond first element');
+                       /* alert('show.prev called beyond first element'); */
                }
        },
 
        stop: function(){
-               if (this.isplaying) { $clear(this.timer); }
+               this.cleartimer()
                this.isplaying = false;
-               $clear(this.timer);
                this.controls.running(0);
        },
 
@@ -111,19 +124,27 @@ var Show = new Class({
                this.controls.running(1);
        },
 
+       toggleplay: function(){
+               if (this.isplaying) { this.stop(); }
+               else { this.play(); }
+       },
+
        next: function(){
+               this.cleartimer();
+               this.stopfx();
                if (this.currentid < this.vimgs.length-1) {
                        this.show(this.currentid+1);
                } else {
-                       alert('show.next called beyond last element');
+                       /* alert('show.next called beyond last element'); */
                }
        },
 
        exit: function(){
-               if (this.isplaying) { $clear(this.timer); }
+               this.cleartimer();
+               this.stopfx();
                this.prevdisplay.setStyle('display', 'none');
                this.ondisplay.setStyle('display', 'none');
-               this.stopfx();
+               document.location.href = this.baseurl;
                this.options.cbExit();
        },
 
@@ -137,6 +158,7 @@ var Show = new Class({
                this.options.cbStart();
                this.isplaying = play;
                this.controls.running(this.isplaying);
+               this.updatecoords();
                this.show(id);
                return false; /* to make it usable from href links */
        },
@@ -159,8 +181,9 @@ var Show = new Class({
                        this.pendingload = true;
                        this.showloading();
                }
+               document.location.href = this.baseurl+'#'+this.vimgs[id][0];
                this.controls.info(id,this.vimgs.length,
-                               this.vimgs[id][0],
+                               '#'+this.vimgs[id][0],
                                this.vimgs[id][1]);
        },
 
@@ -218,18 +241,20 @@ var Show = new Class({
        },
 
        display: function(cachel){
-               var newstyle = this.calcsize(cachel);
-               var newimg = cachel.img.clone();
-               newimg.setStyles(newstyle);
-               newimg.setStyles({
+               var newimg = cachel.img.clone().
+               set('class', 'mainformat').
+               setProperty('alt', 'Current Image').
+               setStyles(this.calcsize(cachel)).
+               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.replaces(this.prevdisplay).
+               setProperty('alt', 'Previous Image').
+               setStyle('zIndex', 2);
+               this.prevdisplay = this.ondisplay;
                this.ondisplay = newimg;
+               this.container.grab(this.ondisplay);
                this.effect();
        },
 
@@ -284,13 +309,21 @@ var Show = new Class({
        },
 
        showloading: function(){
-               this.loadingdiv.setStyle('display', 'block');
+               this.loadingdiv.setStyles({
+                       display: 'block',
+                       width: this.coords.width,
+                       height: this.coords.height,
+               });
        },
 
        hideloading: function(){
                this.loadingdiv.setStyle('display', 'none');
        },
 
+       cleartimer: function(){
+               if (this.isplaying) { $clear(this.timer); }
+       },
+
        stopfx: function(){
                if (this.fx) this.fx.cancel();
        },