X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fshow.js;h=2d5f5b168255cd2bd0cfe0de0b11a9065d76da3a;hp=b5b00da7e39893b2b9df7b3fb32abf97c25f6bda;hb=02e3f3fcb4c9f4741974ee40e838ed0b8a358b88;hpb=86d47020859e082c0eb71d390e5788ebbbcff8c0 diff --git a/include/show.js b/include/show.js index b5b00da..2d5f5b1 100644 --- a/include/show.js +++ b/include/show.js @@ -43,7 +43,7 @@ var Show = new Class({ cbExit: function(){ alert('show exit undefined'); }, percentage: 98, delay: 5000, - fxduration: 200, + fxduration: 200 } }, @@ -58,7 +58,7 @@ var Show = new Class({ this.cache = { prev: {}, curr: {}, - next: {}, + next: {} }; /* * thescripts.com/forum/thread170365.html @@ -72,11 +72,10 @@ var Show = new Class({ this.updatecoords(); this.prevdisplay = new Element('img'). - setStyle('opacity', 0). - injectInside(this.container.container); - this.ondisplay = new Element('img'). - setStyle('opacity', 0). - 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', @@ -85,8 +84,9 @@ var Show = new Class({ zIndex: 4, display: 'none', width: this.coords.width, - height: this.coords.height, - }).injectInside(this.container.container); + height: this.coords.height + }); + this.container.grab(this.loadingdiv); window.addEvent('resize', this.resizer.bind(this)) }, @@ -103,6 +103,8 @@ 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 { @@ -111,9 +113,8 @@ var Show = new Class({ }, stop: function(){ - if (this.isplaying) { $clear(this.timer); } + this.cleartimer() this.isplaying = false; - $clear(this.timer); this.controls.running(0); }, @@ -129,6 +130,8 @@ var Show = new Class({ }, next: function(){ + this.cleartimer(); + this.stopfx(); if (this.currentid < this.vimgs.length-1) { this.show(this.currentid+1); } else { @@ -137,12 +140,12 @@ var Show = new Class({ }, exit: function(){ - if (this.isplaying) { $clear(this.timer); } + this.cleartimer(); + this.stopfx(); this.prevdisplay.setStyle('display', 'none'); this.ondisplay.setStyle('display', 'none'); - this.stopfx(); - this.options.cbExit(); document.location.href = this.baseurl; + this.options.cbExit(); }, comm: function(){ @@ -168,7 +171,7 @@ var Show = new Class({ var newcache = { prev: (id > 0)?this.prepare(id-1):{}, curr: this.prepare(id), - next: (id < (this.vimgs.length-1))?this.prepare(id+1):{}, + next: (id < (this.vimgs.length-1))?this.prepare(id+1):{} }; delete this.cache; this.cache = newcache; @@ -208,7 +211,7 @@ var Show = new Class({ id: id, vi: vi, ready: false, - url: this.vimgs[id][2][vi][2], + url: this.vimgs[id][2][vi][2] }; cachel.img = this.bgload(cachel); } @@ -221,7 +224,7 @@ var Show = new Class({ return new Asset.image(this.vimgs[cachel.id][2][cachel.vi][2],{ id: this.vimgs[cachel.id][0], title: this.vimgs[cachel.id][1], - onload: this.loadcomplete.bind(this,[cachel]), + onload: this.loadcomplete.bind(this,[cachel]) }); }, @@ -238,24 +241,26 @@ 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, + 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(); }, effect: function(){ this.fx = new Fx.Tween(this.ondisplay, { - duration: this.options.fxduration, + duration: this.options.fxduration }); this.fx.addEvent('complete',this.displaycomplete.bind(this)); this.fx.start('opacity', 0, 1); @@ -279,6 +284,15 @@ var Show = new Class({ }, calcsize: function(cachel){ + if (! cachel.url) { + return { + position: 'absolute', + top: 0+'px', + left: 0+'px', + width: this.coords.width, + height: this.coords.height + }; + } var factor = 1; var candidate; candidate = this.target.width / @@ -299,18 +313,26 @@ var Show = new Class({ top: t+'px', left: l+'px', width: w, - height: h, + height: h }; }, 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(); }, @@ -321,13 +343,14 @@ var Show = new Class({ width: Math.round(this.coords.width * this.options.percentage / 100), height: Math.round(this.coords.height * - this.options.percentage / 100), + this.options.percentage / 100) }; /* alert('coords: '+this.coords.width+'x'+this.coords.height+ ', target: '+this.target.width+'x'+this.target.height); */ - }, + } }); + Show.implement(new Options); Show.implement(new Events);