make links, nice style, etc.

diff --git a/include/gallery.css b/include/gallery.css
index 8503ddf2a1c9cd41645361924ae2d182673a4b0e..edfa12d1e66970254ff07b061283ca9900f2a1da 100644 (file)
--- a/include/gallery.css
+++ b/include/gallery.css
@@ -105,38 +105,47 @@ table.picframe {
 }
 
 .controlButton#prev {
- left: 0px;
+ left: 3px;
  background: url(left.png) no-repeat;
 }
 
 .controlButton#stop {
- left: 25px;
+ left: 28px;
  background: url(stop.png) no-repeat;
 }
 
 .controlButton#play {
- left: 50px;
+ left: 53px;
  background: url(play.png) no-repeat;
 }
 
 .controlButton#next {
- left: 75px;
+ left: 78px;
  background: url(right.png) no-repeat;
 }
 
 .controlButton#exit {
- left: 100px;
+ left: 103px;
  background: url(close.png) no-repeat;
 }
 
 .controlButton#comm {
- left: 125px;
+ left: 128px;
  width: auto;
- color: white;
- margin: .3ex;
+ font-size: 20px;
+ margin-left: .5ex;
+ margin-right: .5ex;
+ padding-left: .5ex;
+ padding-right: .5ex;
+ background-color: rgba(0,0,0,.5);
  cursor: default;
 }
 
+.controlButton#comm a {
+ color: white;
+ text-decoration: none;
+}
+
 .MultiBoxContainer {
        position: absolute;
        border: 2px solid #000;

diff --git a/include/gallery.js b/include/gallery.js
index 445a826aa9f773beeb58cc418727f476547b92dc..3dcc3c2201a7088a931e74bf40c3d9e8fa9c319d 100644 (file)
--- a/include/gallery.js
+++ b/include/gallery.js
@@ -103,14 +103,6 @@ var showControls = new Class({
                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]()
@@ -123,15 +115,12 @@ var showControls = new Class({
                },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][0]
+ var i=rimgs[id]
  /* alert('show id='+id+' index='+i+' doplay='+doplay) */
  showwin.show()
  show.play(i)
@@ -200,13 +189,13 @@ function init_gallery() {
   el.addEvent('click', showImage.bind(el,[el.get('id'),0]))
  })
  $$('div.varimages').each(function(el,i){
-  rimgs[el.id] = [i, el.title]
+  rimgs[el.id] = i
   vimgs[i] = []
   el.getElements('a').each(function(ael,j){
    dim = /(\d+)[^\d](\d+)/.exec(ael.text)
    w = dim[1]
    h = dim[2]
-   vimgs[i][j]=[w,h,ael.href]
+   vimgs[i][j]=[w,h,ael.href,el.id,el.title]
   })
  })
    /* debugging output
@@ -246,7 +235,8 @@ function init_gallery() {
   duration: 1000,
   loop: false, 
   thumbnails: false,
-  onClick: function(i){alert(i)}
+  onClick: function(i){alert(i)},
+  comment: 'comm',
  }
  show = new slideShow('slideshowContainer',vimgs,showparms)
 

diff --git a/include/slideshow.js b/include/slideshow.js
index 2de9fee5b7b8b8770bfd6d2c606567ddadf47e5d..5d648c8925f528cd5a0473766849671cf2fd9666 100644 (file)
--- a/include/slideshow.js
+++ b/include/slideshow.js
@@ -24,7 +24,8 @@ var slideShow = new Class({
                        thumbnailCls: 'outline',\r
                        backgroundSlider: false, //change to be an instance.\r
                        loadingCls: 'loading',\r
-                       onClick: false\r
+                       onClick: false,\r
+                       comment: null,\r
                };\r
        },\r
 \r
@@ -41,8 +42,8 @@ var slideShow = new Class({
                                this.options.onClick(this.imageLoaded);\r
                        }.bind(this));\r
                }\r
-               \r
-               \r
+               this.comm=this.options.comment;\r
+\r
                this.imagesHolder = new Element('div').setStyles({\r
                        position: 'absolute',\r
                        overflow: 'hidden',\r
@@ -161,7 +162,8 @@ var slideShow = new Class({
                        this.imageObj = new Asset.image(img, {onload: this.show.bind(this)});\r
                        this.imageObj.set('width', width).set('height', height);\r
                }\r
-               \r
+               this.imageObj.set('id', this.images[this.image][i][3]);\r
+               this.imageObj.set('title', this.images[this.image][i][4]);\r
        },\r
 \r
        restyle: function(imgobj){\r
@@ -217,6 +219,15 @@ var slideShow = new Class({
                this.imageLoaded = this.image;\r
                this.loading.setStyle('display','none');\r
                this.effect();\r
+               this.comm = $(this.comm);\r
+               if (this.comm) {\r
+                       var a = this.comm.getElement('a');\r
+                       if (a) a.dispose();\r
+                       a = new Element('a', {\r
+                               href: '#'+this.imageObj.get('id'),\r
+                               html: this.imageObj.get('title'),\r
+                       }).injectInside(this.comm);\r
+               }\r
        },\r
        \r
        wait: function(){\r
@@ -437,6 +448,9 @@ var slideShow = new Class({
        \r
        resetAnimation: function(){\r
                this.animating = false;\r
+               this.oldImage.setStyles({\r
+                       opacity: 0\r
+               });\r
        },\r
 \r
        position: function(){\r

diff --git a/mkgallery.pl b/mkgallery.pl
index 0c13f238df017d732b6bc0eeb827e89b4b680299..d5473c18779abd346930ce5a820aae30a360b139 100755 (executable)
--- a/mkgallery.pl
+++ b/mkgallery.pl
@@ -671,7 +671,7 @@ sub img_entry {
                                -class=>'showImage',
                                -id=>$name},
                                img({-src=>$thumb})),"\n"),"\n",
-               start_div({-class=>'varimages',-id=>$name,-name=>$title}),"\n";
+               start_div({-class=>'varimages',-id=>$name,-title=>$title}),"\n";
        foreach my $sz(@sizes) {
                my $src=$self->{$sz}->{'url'};
                my $w=$self->{$sz}->{'dim'}->[0];