make it work, more or less...

diff --git a/include/gallery.css b/include/gallery.css
index 5e1f741a4de34d3dacf6a054e74b5ecebe430022..c863c1972f0234be32347843c8bf9b4aec328db1 100644 (file)
--- 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 40707fe1eb8afc94062155745280c5ecdf8fb896..690ac57dfb24ddda6893bdd7518acfa49a30f98a 100644 (file)
--- 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 (file)
index 0000000..cfc7f1c
Binary files /dev/null and b/include/play.png differ

diff --git a/include/slideshow.js b/include/slideshow.js
index 7f2e97385d2f670ec64fff8d5ee15bb66c3839e3..0b19b6bd4b3df1a4560fe7ae049f859aeedb8dbf 100644 (file)
--- a/include/slideshow.js
+++ b/include/slideshow.js
@@ -53,6 +53,7 @@ var slideShow = new Class({
                        display: 'none'\r
                }).injectInside(this.container);\r
                \r
+               /*\r
                if($type(images) == 'string' && !this.options.thumbnails){\r
                        var imageList = [];\r
                        $$('.'+images).each(function(el){\r
@@ -83,8 +84,11 @@ var slideShow = new Class({
                        }\r
                \r
                }else{\r
+               */\r
                        this.images = images;\r
+               /*\r
                }\r
+               */\r
                \r
                this.loading = new Element('div').addClass(this.options.loadingCls).setStyles({\r
                        position: 'absolute',\r
@@ -117,18 +121,33 @@ var slideShow = new Class({
                this.stopped = true;\r
                this.started = false;\r
                this.animating = false;\r
+               window.addEvent('resize', this.reshow.bind(this));\r
+               window.addEvent('scroll', this.reshow.bind(this));\r
        },\r
        \r
        load: function(){\r
                $clear(this.timer);\r
                this.loading.setStyle('display','block');\r
                this.image++;\r
-               var img = this.images[this.image];\r
+               var i;\r
+               var width;\r
+               var height;\r
+               var img;\r
+               for (i=0;i<this.images[this.image].length;i++) {\r
+                       width = this.images[this.image][i][0];\r
+                       height = this.images[this.image][i][1];\r
+                       img = this.images[this.image][i][2];\r
+                       if (width >= this.width || height >= this.height) {\r
+                               break;\r
+                       }\r
+               }\r
+               /* alert('req1 image '+img); */\r
                delete this.imageObj;\r
                \r
                doLoad = true;\r
                this.imagesHolder.getElements('img').each(function(el){\r
-                       var src = this.images[this.image];\r
+                       var src = this.images[this.image][i][2];\r
+                       /* alert('req2 image '+src); */\r
                        if(el.src == src){\r
                                this.imageObj = el;\r
                                doLoad = false;\r
@@ -140,12 +159,42 @@ var slideShow = new Class({
                if(doLoad){\r
                        this.add = true;\r
                        this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});\r
+                       this.imageObj.set('width', width).set('height', height);\r
                }\r
                \r
        },\r
 \r
+       restyle: function(imgobj){\r
+               var width = imgobj.get('width');\r
+               var height = imgobj.get('height');\r
+               var vfactor = this.width/width;\r
+               var hfactor = this.height/height;\r
+               var factor = 1;\r
+               if (vfactor < factor) { factor = vfactor; }\r
+               if (hfactor < factor) { factor = hfactor; }\r
+               factor *= .95;\r
+               height = Math.round(height * factor);\r
+               width = Math.round(width * factor);\r
+               var topoff = (this.height - height)/2;\r
+               var leftoff = (this.width - width)/2;\r
+               /* alert('dim: '+width+'x'+height+'+'+leftoff+'+'+topoff); */\r
+               imgobj.setStyles({\r
+                       position: 'absolute',\r
+                       top: topoff,\r
+                       left: leftoff,\r
+                       width: width,\r
+                       height: height,\r
+               });\r
+       },\r
+\r
        show: function(add){\r
                \r
+               this.restyle(this.imageObj);\r
+               var oimg = this.oldImage.getElement('img');\r
+               if (oimg) {\r
+                       this.restyle(oimg);\r
+               }\r
+\r
                if(this.add){\r
                        this.imageObj.injectInside(this.imagesHolder);\r
                }\r
@@ -162,23 +211,9 @@ var slideShow = new Class({
                        var obj = this.imageObj.clone();\r
                        obj.injectInside(this.newImage);\r
                }\r
+\r
                this.imageLoaded = this.image;\r
                this.loading.setStyle('display','none');\r
-               if(this.options.thumbnails){\r
-                       \r
-                       if(this.options.backgroundSlider){\r
-                               var elT = this.thumbnailImages[this.image];\r
-                               this.bgSlider.move(elT);\r
-                               this.bgSlider.setStart(elT);\r
-                       }else{\r
-                               this.thumbnails.each(function(el,i){\r
-                                       el.removeClass(this.options.thumbnailCls);\r
-                                       if(i == this.image){\r
-                                               el.addClass(this.options.thumbnailCls);\r
-                                       }\r
-                               },this);\r
-                       }\r
-               }\r
                this.effect();\r
        },\r
        \r
@@ -187,6 +222,7 @@ var slideShow = new Class({
        },\r
        \r
        play: function(num){\r
+               this.position();\r
                if(this.stopped){\r
                        if(num > -1){this.image = num-1};\r
                        if(this.image < this.images.length){\r
@@ -205,6 +241,16 @@ var slideShow = new Class({
                $clear(this.timer);\r
                this.stopped = true;\r
        },\r
+\r
+       quit: function(){\r
+               this.stop();\r
+       /* does not work */\r
+               var oimg = this.oldImage.getElement('img');\r
+               if (oimg) {\r
+                       oimg.dispose();\r
+                       delete oimg;\r
+               }\r
+       },\r
        \r
        next: function(wait){\r
                var doNext = true;\r
@@ -316,28 +362,28 @@ var slideShow = new Class({
        \r
        setup: function(dir){\r
                if(dir == 'top'){\r
-                       this.top = -this.container.getStyle('height').toInt();\r
+                       this.top = -this.height;\r
                        this.left = 0;\r
-                       this.topOut = this.container.getStyle('height').toInt();\r
+                       this.topOut = this.height;\r
                        this.leftOut = 0;\r
                        \r
                }else if(dir == 'right'){\r
                        this.top = 0;\r
-                       this.left = this.container.getStyle('width').toInt();\r
+                       this.left = this.width;\r
                        this.topOut = 0;\r
-                       this.leftOut = -this.container.getStyle('width').toInt();\r
+                       this.leftOut = -this.width;\r
                        \r
                }else if(dir == 'bottom'){\r
-                       this.top = this.container.getStyle('height').toInt();\r
+                       this.top = this.height;\r
                        this.left = 0;\r
-                       this.topOut = -this.container.getStyle('height').toInt();\r
+                       this.topOut = -this.height;\r
                        this.leftOut = 0;\r
                        \r
                }else if(dir == 'left'){\r
                        this.top = 0;\r
-                       this.left = -this.container.getStyle('width').toInt();\r
+                       this.left = -this.width;\r
                        this.topOut = 0;\r
-                       this.leftOut = this.container.getStyle('width').toInt();\r
+                       this.leftOut = this.width;\r
                        \r
                }else{\r
                        this.top = 0;\r
@@ -389,7 +435,24 @@ var slideShow = new Class({
        \r
        resetAnimation: function(){\r
                this.animating = false;\r
-       }\r
+       },\r
+\r
+       position: function(){\r
+               var myCoords = this.container.getCoordinates();\r
+               this.width = myCoords.width;\r
+               this.height = myCoords.height;\r
+               /*\r
+               this.width = this.container.getStyle('width').toInt();\r
+               this.height = this.container.getStyle('height').toInt();\r
+               */\r
+               /* alert('container dim: '+this.width+'x'+this.height); */\r
+       },\r
+\r
+       reshow: function(){\r
+               this.position();\r
+               this.image--;\r
+               this.load();\r
+       },\r
        \r
 });\r
 slideShow.implement(new Options);\r

diff --git a/include/stop.png b/include/stop.png
new file mode 100644 (file)
index 0000000..940dba0
Binary files /dev/null and b/include/stop.png differ

diff --git a/mkgallery.pl b/mkgallery.pl
index 0a4988c067899577d46b7a934da5c67dbd4c7bd2..2596b9834aafd430a012b5a34c94dab9d7286ba1 100755 (executable)
--- 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];