X-Git-Url: http://www.average.org/gitweb/?p=mkgallery.git;a=blobdiff_plain;f=include%2Fshow.js;h=2d5f5b168255cd2bd0cfe0de0b11a9065d76da3a;hp=065898393fb3dcec995800df564f7961041726d9;hb=HEAD;hpb=84036a64eb5be457cfa21450ddc7da596eec8bbc diff --git a/include/show.js b/include/show.js index 0658983..2d5f5b1 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 } }, @@ -57,22 +58,35 @@ var Show = new Class({ this.cache = { prev: {}, curr: {}, - next: {}, + 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.previd = -1; - this.ondisplay = new Element('img'). - injectInside(this.container.container); + this.prevdisplay = new Element('img'). + 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', top: 0, left: 0, - zIndex: 3, + 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)) }, @@ -89,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); }, @@ -109,17 +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'); + document.location.href = this.baseurl; this.options.cbExit(); }, @@ -133,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 */ }, @@ -141,12 +167,11 @@ 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):{}, 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; @@ -156,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]); }, @@ -185,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); } @@ -198,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]) }); }, @@ -215,11 +241,33 @@ var Show = new Class({ }, display: function(cachel){ - var newstyle = this.calcsize(cachel); - var newimg = cachel.img.clone(); - newimg.setStyles(newstyle); - newimg.replaces(this.ondisplay); + var newimg = cachel.img.clone(). + set('class', 'mainformat'). + setProperty('alt', 'Current Image'). + setStyles(this.calcsize(cachel)). + setStyles({ + zIndex: 3, + opacity: 0 + }); + 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 + }); + 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); } @@ -236,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 / @@ -256,19 +313,28 @@ 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(); }, updatecoords: function(){ @@ -277,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);