From fc80339e3c4b8d62c2138734f8b778bd714aa46b Mon Sep 17 00:00:00 2001 From: Eugene Crosser Date: Thu, 21 Aug 2008 16:06:03 +0000 Subject: [PATCH] make it work, more or less... --- include/gallery.css | 58 ++++++++++++++++++++-- include/gallery.js | 100 ++++++++++++++++++++++++++++++------- include/play.png | Bin 0 -> 692 bytes include/slideshow.js | 115 +++++++++++++++++++++++++++++++++---------- include/stop.png | Bin 0 -> 643 bytes mkgallery.pl | 22 +-------- 6 files changed, 227 insertions(+), 68 deletions(-) create mode 100644 include/play.png create mode 100644 include/stop.png diff --git a/include/gallery.css b/include/gallery.css index 5e1f741..c863c19 100644 --- a/include/gallery.css +++ b/include/gallery.css @@ -82,10 +82,60 @@ table.picframe { } .slideshowContainer { - border: 1px solid #ccc; - width: 99%; - height: 95%; - margin-bottom: 5px; + padding-bottom: 32px; + width: 100%; + height: 100%; +} + +.slideshowControls { + position: absolute; + bottom: 0px; + left: 0px; + width: 100%; + height: 30px; + border-top: 1px solid white; + z-index: 3; +} + +.controlButton { + position: absolute; + bottom: 3px; + width: 24px; + height: 24px; + cursor: pointer; +} + +.controlButton#prev { + left: 0px; + background: url(left.png) no-repeat; +} + +.controlButton#stop { + left: 25px; + background: url(stop.png) no-repeat; +} + +.controlButton#play { + left: 50px; + background: url(play.png) no-repeat; +} + +.controlButton#next { + left: 75px; + background: url(right.png) no-repeat; +} + +.controlButton#exit { + left: 100px; + background: url(close.png) no-repeat; +} + +.controlButton#comm { + left: 125px; + width: auto; + color: white; + margin: .3ex; + cursor: default; } .MultiBoxContainer { diff --git a/include/gallery.js b/include/gallery.js index 40707fe..690ac57 100644 --- a/include/gallery.js +++ b/include/gallery.js @@ -14,19 +14,19 @@ var showWindow = new Class({ getOptions: function(){ return { + embed: [], zIndex: 2, container: document.body, onClick: $empty, } }, - initialize: function(div,options){ + initialize: function(name,options){ this.setOptions(this.getOptions(), options) this.options.container = $(this.options.container) - this.div = $(div) - this.div.setStyles({ + this.container = new Element('div').addClass(name).setStyles({ position: 'absolute', left: '0px', top: '0px', @@ -34,10 +34,17 @@ var showWindow = new Class({ zIndex: this.options.zIndex, overflow: 'hidden', display: 'none' - }) - this.div.addEvent('click', function(){ + }).addEvent('click', function(){ this.options.onClick() - }.bind(this)) + }.bind(this)).injectInside(this.options.container); + + this.options.embed.each(function(el){ + var sub = new Element('div') + sub.addClass(el).setProperties({ + id: el, + name: el, + }).injectInside(this.container) + },this) this.position() @@ -49,10 +56,10 @@ var showWindow = new Class({ if(this.options.container == document.body){ var h = window.getHeight()+'px' var s = window.getScrollTop()+'px' - this.div.setStyles({top: s, height: h}) + this.container.setStyles({top: s, height: h}) }else{ var myCoords = this.options.container.getCoordinates() - this.div.setStyles({ + this.container.setStyles({ top: myCoords.top+'px', height: myCoords.height+'px', left: myCoords.left+'px', @@ -62,18 +69,64 @@ var showWindow = new Class({ }, show: function(){ - this.div.setStyles({display: 'block'}) + this.container.setStyle('display', 'block') }, hide: function(){ - this.div.setStyles({display: 'none'}) + this.container.setStyle('display', 'none') } }) showWindow.implement(new Options) +var showControls = new Class({ + + getOptions: function(){ + return { + next: $empty, + prev: $empty, + stop: $empty, + play: $empty, + exit: $empty, + } + }, + + initialize: function(name,options){ + this.setOptions(this.getOptions(), options) + + this.container = $(name) + + var buttons = ['prev','stop','play','next','exit','comm'] + buttons.each(function(el){ + var sub = new Element('div') + if (el == 'comm') { + this.comm = sub + sub.set('text', 'this is a comment field') + /* + } else { + sub.set('text', el) + */ + } + if (this.options[el]) { + sub.addEvent('click', function() { + this.options[el]() + }.bind(this)) + } + sub.addClass('controlButton').setProperties({ + id: el, + name: el, + }).injectInside(this.container) + },this) + }, + + settext: function(text) { + this.comm.set(text) + } +}) +showControls.implement(new Options) + /* Make overlay window and start slideshow */ function showImage(id,doplay) { - var i=rimgs[id] + var i=rimgs[id][0] /* alert('show id='+id+' index='+i+' doplay='+doplay) */ showwin.show() show.play(i) @@ -85,7 +138,7 @@ function showImage(id,doplay) { /* Stop slideshow and return to index page */ function showStop() { - show.stop() + show.quit() showwin.hide() /* var img = show.newImage.getElement('img'); @@ -142,9 +195,8 @@ function init_gallery() { el.addEvent('click', showImage.bind(el,[el.get('id'),0])) }) $$('div.varimages').each(function(el,i){ - var id=el.id - rimgs[id]=i - vimgs[i]=[] + rimgs[el.id] = [i, el.title] + vimgs[i] = [] el.getElements('a').each(function(ael,j){ dim = /(\d+)[^\d](\d+)/.exec(ael.text) w = dim[1] @@ -177,7 +229,10 @@ function init_gallery() { } ibox = new multiBox('infoBox', iboxparams) - var winparms = {} + var winparms = { + /* onClick: showStop, /* temporarily */ + embed: ['slideshowContainer', 'slideshowControls'], + } showwin = new showWindow('slideshowWindow',winparms) var showparms = { @@ -185,10 +240,19 @@ function init_gallery() { effect: 'fade', duration: 1000, loop: false, - thumbnails: true, + thumbnails: false, onClick: function(i){alert(i)} } - show = new slideShow('slideshowContainer','slideshowThumbnail',showparms) + show = new slideShow('slideshowContainer',vimgs,showparms) + + var ctlparams = { + next: function(){show.next()}, + prev: function(){show.previous()}, + stop: function(){show.stop()}, + play: function(){show.play()}, + exit: function(){showStop()}, + } + ctl = new showControls('slideshowControls',ctlparams) parsedurl = parseUrl(document.URL) /* alert('Anchor: '+parsedurl['anchor']+'\nURL: '+document.URL) */ diff --git a/include/play.png b/include/play.png new file mode 100644 index 0000000000000000000000000000000000000000..cfc7f1c5e2405d24749d8f56caf9ea8562a75072 GIT binary patch literal 692 zcmV;l0!#ggP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iOP| z3mqy=jFP1Q00J~gL_t(Y$Gw)ZQrkcfhCj=e3myT?r0`M5lY&81Hn_}Nq{%y^ph=NV z4?&f;$TQ?rdE|n|8J#u2&;lm$@TbvvL}VG0knGGBds_Yft?u?;wItDCUEnS74mbt| zz;5}h05aek@D-Qv$MkwV|L%9-Gw=oYxvqk?q>qvolH{CIk|a7fI8dk45%9#rFqAPyNs=hf zb6?G(#AtimD!~Uy_mX6-)p$Ivfj0SgJeIZAliZhBPY7a3g(RhEs(!z}HMsYFzppe+ zJxNhwf~0PFNXqkECnqOs0laM@8I4AA&iT}HNnIozNxGJ#BuN@ymZaO;TS;1bCf<`I z@dVeBj*xWbcW;c@ieM9oF{WC@SpdWU)>>w>SyR*T`1r`q&dw@+cz7TT!&=^KHp5!$ z!#DsUfa!F~a=C0I2!fy%FBS{B-R_h1<#I`uWj>4o-~P@yUTQ%QaCdiCTd!d42Ks z#YHWz)9DaJkq@VYC2ybM<DW<1_Ryi0ihW@Mn aw)_G#Zku0%kSRa_0000= this.width || height >= this.height) { + break; + } + } + /* alert('req1 image '+img); */ delete this.imageObj; doLoad = true; this.imagesHolder.getElements('img').each(function(el){ - var src = this.images[this.image]; + var src = this.images[this.image][i][2]; + /* alert('req2 image '+src); */ if(el.src == src){ this.imageObj = el; doLoad = false; @@ -140,12 +159,42 @@ var slideShow = new Class({ if(doLoad){ this.add = true; this.imageObj = new Asset.image(img, {onload: this.show.bind(this)}); + this.imageObj.set('width', width).set('height', height); } }, + restyle: function(imgobj){ + var width = imgobj.get('width'); + var height = imgobj.get('height'); + var vfactor = this.width/width; + var hfactor = this.height/height; + var factor = 1; + if (vfactor < factor) { factor = vfactor; } + if (hfactor < factor) { factor = hfactor; } + factor *= .95; + height = Math.round(height * factor); + width = Math.round(width * factor); + var topoff = (this.height - height)/2; + var leftoff = (this.width - width)/2; + /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */ + imgobj.setStyles({ + position: 'absolute', + top: topoff, + left: leftoff, + width: width, + height: height, + }); + }, + show: function(add){ + this.restyle(this.imageObj); + var oimg = this.oldImage.getElement('img'); + if (oimg) { + this.restyle(oimg); + } + if(this.add){ this.imageObj.injectInside(this.imagesHolder); } @@ -162,23 +211,9 @@ var slideShow = new Class({ var obj = this.imageObj.clone(); obj.injectInside(this.newImage); } + this.imageLoaded = this.image; this.loading.setStyle('display','none'); - if(this.options.thumbnails){ - - if(this.options.backgroundSlider){ - var elT = this.thumbnailImages[this.image]; - this.bgSlider.move(elT); - this.bgSlider.setStart(elT); - }else{ - this.thumbnails.each(function(el,i){ - el.removeClass(this.options.thumbnailCls); - if(i == this.image){ - el.addClass(this.options.thumbnailCls); - } - },this); - } - } this.effect(); }, @@ -187,6 +222,7 @@ var slideShow = new Class({ }, play: function(num){ + this.position(); if(this.stopped){ if(num > -1){this.image = num-1}; if(this.image < this.images.length){ @@ -205,6 +241,16 @@ var slideShow = new Class({ $clear(this.timer); this.stopped = true; }, + + quit: function(){ + this.stop(); + /* does not work */ + var oimg = this.oldImage.getElement('img'); + if (oimg) { + oimg.dispose(); + delete oimg; + } + }, next: function(wait){ var doNext = true; @@ -316,28 +362,28 @@ var slideShow = new Class({ setup: function(dir){ if(dir == 'top'){ - this.top = -this.container.getStyle('height').toInt(); + this.top = -this.height; this.left = 0; - this.topOut = this.container.getStyle('height').toInt(); + this.topOut = this.height; this.leftOut = 0; }else if(dir == 'right'){ this.top = 0; - this.left = this.container.getStyle('width').toInt(); + this.left = this.width; this.topOut = 0; - this.leftOut = -this.container.getStyle('width').toInt(); + this.leftOut = -this.width; }else if(dir == 'bottom'){ - this.top = this.container.getStyle('height').toInt(); + this.top = this.height; this.left = 0; - this.topOut = -this.container.getStyle('height').toInt(); + this.topOut = -this.height; this.leftOut = 0; }else if(dir == 'left'){ this.top = 0; - this.left = -this.container.getStyle('width').toInt(); + this.left = -this.width; this.topOut = 0; - this.leftOut = this.container.getStyle('width').toInt(); + this.leftOut = this.width; }else{ this.top = 0; @@ -389,7 +435,24 @@ var slideShow = new Class({ resetAnimation: function(){ this.animating = false; - } + }, + + position: function(){ + var myCoords = this.container.getCoordinates(); + this.width = myCoords.width; + this.height = myCoords.height; + /* + this.width = this.container.getStyle('width').toInt(); + this.height = this.container.getStyle('height').toInt(); + */ + /* alert('container dim: '+this.width+'x'+this.height); */ + }, + + reshow: function(){ + this.position(); + this.image--; + this.load(); + }, }); slideShow.implement(new Options); diff --git a/include/stop.png b/include/stop.png new file mode 100644 index 0000000000000000000000000000000000000000..940dba0c60177f22aa39a88e35e5157783c2d966 GIT binary patch literal 643 zcmV-}0(||6P)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iOP| z3nBwo;2`w?00IL^L_t(Y$Gw&@ZreZ*MIV=>4q-`%12%6yG&=f~oSvSNWtmUyvxC-!Fbwyebq(6aDx7mi zTSd!RH&*fHX4h%gS65fBYS()gPLd>wC%oTDg;os~J6Ovti~e!qY4%KR@& d|J6TRegoeuW8v^DEgS#<002ovPDHLkV1j{}7>xh` literal 0 HcmV?d00001 diff --git a/mkgallery.pl b/mkgallery.pl index 0a4988c..2596b98 100755 --- a/mkgallery.pl +++ b/mkgallery.pl @@ -638,25 +638,7 @@ sub startimglist { print $IND h2("Images ", a({-href=>$slideref,-class=>'showStart',-id=>$first}, - '> slideshow')),"\n", - start_div({-id=>"slideshowWindow",-class=>"slideshowWindow"}), - div({-id=>"slideshowContainer", - -class=>"slideshowContainer"},""), - start_div({-id=>"slideshowControls", - -class=>"slideshowControls"}), - a({-href=>"#",-onClick=>"show.previous();return false;"}, - "Prev"), - a({-href=>"#",-onClick=>"show.play();return false;"}, - "Play"), - a({-href=>"#",-onClick=>"show.stop();return false;"}, - "Stop"), - a({-href=>"#",-onClick=>"show.next();return false;"}, - "Next"), - a({-href=>"#",-onClick=>"showStop();return false;"}, - "Exit"), - end_div, - end_div, - "\n"; + '> slideshow')),"\n"; } sub img_entry { @@ -685,7 +667,7 @@ sub img_entry { -class=>'showImage', -id=>$name}, img({-src=>$thumb})),"\n"),"\n", - start_div({-class=>'varimages',-id=>$name}),"\n"; + start_div({-class=>'varimages',-id=>$name,-name=>$title}),"\n"; foreach my $sz(@sizes) { my $src=$self->{$sz}->{'url'}; my $w=$self->{$sz}->{'dim'}->[0]; -- 2.39.2