show additional infos in the image preview bubble

git-svn-id: file:///var/lib/svn/phpfspot/trunk@40 fa6a889d-dae6-447d-9e79-4ba9a3039384

diff --git a/bubble.js b/bubble.js
index 600407bd5af36bc464664d4cb3c539cc6f0376b6..1d715b10cd3147733b12c6e2ae654c4558ce47c4 100644 (file)
--- a/bubble.js
+++ b/bubble.js
@@ -39,9 +39,11 @@ function bindBubbles(e){
       if(window.addEventListener){\r
          lbActions[i].addEventListener("mouseover",attachBubble,false);\r
          lbActions[i].addEventListener("mouseout",detachBubble,false);\r
+         lbActions[i].addEventListener("click",detachBubble,false);\r
       }else{\r
          lbActions[i].attachEvent("onmouseover",attachBubble);\r
          lbActions[i].attachEvent("onmouseout",detachBubble);\r
+         lbActions[i].attachEvent("onclick",detachBubble);\r
       }\r
    }\r
 }\r
@@ -67,26 +69,26 @@ function attachBubble(_b){
 \r
    // should the bubble be displayed above or below the object\r
    if(cur_height >= get_page_height()) {\r
-      var _f=findPos(_c)[1]-283;\r
-      var _mT=16;\r
-      var _mL=12;\r
+      var _f=findPos(_c)[1]-363;\r
+      var _mL=2;\r
+      var _mT=39;\r
       bubbleImage = bubbleImageUp;\r
    }\r
    else {\r
       var _f=findPos(_c)[1]+17;\r
-      var _mT=27;\r
-      var _mL=12;\r
+      var _mL=2;\r
+      var _mT=34;\r
       bubbleImage = bubbleImageDown;\r
    }\r
 \r
    if (BrowserDetect.browser == 'Explorer') {\r
-      _10.style.width="240px";\r
+      _10.style.width="275px";\r
       _10.style.position="absolute";\r
       _10.style.top=_f;\r
       _10.style.zIndex=99999;\r
       _10.style.left=_e;\r
       _10.style.textAlign="left";\r
-      _10.style.height="190px";\r
+      _10.style.height="275px";\r
       _10.style.paddingTop="0";\r
       _10.style.paddingLeft="0";\r
       _10.style.paddingBottom="0";\r
@@ -97,17 +99,24 @@ function attachBubble(_b){
       _10.style.marginRight="0";\r
       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";\r
    } else {\r
-      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+_f+"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");\r
    }\r
 \r
    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {\r
 \r
       var _height = _f;\r
     \r
-      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 240px; height: 190px; padding: 0; margin: 0;");\r
+      _10.setAttribute("style","text-align: center; z-index: 99999; position: absolute; top: "+ _height +"px ; left: "+_e+"px ; background: url("+ bubbleImage +") no-repeat; width: 275px; height: 275px; padding: 0; margin: 0;");\r
     \r
    }\r
 \r
+   if(cur_height >= get_page_height()) \r
+      showBubbleDetails(_10, _c.id, 'up');\r
+   else\r
+      showBubbleDetails(_10, _c.id, 'down');\r
+\r
+   return;\r
+\r
    var img=document.createElement("img");\r
    _10.appendChild(img);\r
 \r
@@ -141,12 +150,6 @@ function detachBubble(_12){
    }\r
 }\r
 \r
-/*if(window.addEventListener){\r
-   addEventListener("load",bindBubbles,false);\r
-}else{\r
-   attachEvent("onload",bindBubbles);\r
-}*/\r
-\r
 function findPos(obj){\r
    var _14=curtop=0;\r
    if(obj.offsetParent){\r

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 5b18be5c90f870b86e297ba83f6c0d61767b4fea..ab5cb9e12c165ab9b34dc3fd0349e9f216146e44 100644 (file)
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@ -239,6 +239,32 @@ class PHPFSPOT {
 
    } // showPhotoIndex()
 
+   public function showBubbleDetails($photo, $direction)
+   {
+      if($direction == "up")
+         $direction = "bubbleimg_up";
+      else
+         $direction = "bubbleimg_down";
+
+      $details = $this->get_photo_details($photo);
+
+      $image_url = "phpfspot_img.php?idx=". $photo ."&width=200";
+
+      $filesize = filesize($this->translate_path($details['directory_path'])  ."/". $details['name']);
+      $filesize = rand($filesize/1024, 2);
+
+      $img = getimagesize($this->translate_path($details['directory_path'])  ."/". $details['name']);
+
+      $this->tmpl->assign('file_size', $filesize);
+      $this->tmpl->assign('width', $img[0]);
+      $this->tmpl->assign('height', $img[1]);
+      $this->tmpl->assign('file_name', $details['name']);
+      $this->tmpl->assign('image_id', $direction);
+      $this->tmpl->assign('image_url', $image_url);
+      $this->tmpl->show("bubble_details.tpl");
+
+   }
+
 }
 
 ?>

diff --git a/phpfspot.js b/phpfspot.js
index c2fe0d6f41e8e546ebf3750985e68fd05d3a54e7..23a713055ed7ad1713aa475b92f0c508f3af8093 100644 (file)
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -44,3 +44,8 @@ function showPhotoIndex()
 //   content = document.getElementById("content");
 //   content.innerHTML = HTML_AJAX.grab('rpc.php?action=show_photo_index');
 }
+
+function showBubbleDetails(object, id, direction)
+{
+   HTML_AJAX.replace(object, 'rpc.php?action=showbubbledetails&id=' + id + '&direction=" + direction');
+}

diff --git a/phpfspot_cfg.php b/phpfspot_cfg.php
index 1be6325b8e6a7bf92a76985e0e0b1498e192fbda..f01955cbd68e2c0326ac4be71f9fa6910a48bf16 100644 (file)
--- a/phpfspot_cfg.php
+++ b/phpfspot_cfg.php
@@ -17,7 +17,7 @@ class PHPFSPOT_CFG {
    var $path_replace_from = "/home/unki";
    var $path_replace_to = "/var/www/images.netshadow.at/htdocs/phpfspot";
 
-   var $thumbs_per_row = 3;
+   var $thumbs_per_row = 4;
 
 }
 

diff --git a/rpc.php b/rpc.php
index cffb4edaa6f48addba713962afb7c114a9adede2..48b4c40502b3c07aa6839b98c435fa221d30c7d0 100644 (file)
--- a/rpc.php
+++ b/rpc.php
@@ -77,6 +77,11 @@ class PHPFSPOT_RPC {
 
             $fspot->showPhotoIndex();
             break;
+   
+         case 'showbubbledetails':
+      
+            $fspot->showBubbleDetails($_GET['id'], $_GET['direction']);
+            break;
 
       }
 

diff --git a/stylesheet.css b/stylesheet.css
index 02f69a4ca33a2c9ed0b7f5a097bbd9d2490ce24e..c21e3ffeba21ba26a92752b85814ea2ffb5ae03a 100644 (file)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -64,6 +64,34 @@ img {
 img.thumb {\r
 }\r
 \r
+img.bubbleimg_up {\r
+   padding-top:            0;\r
+   padding-left:           0;\r
+   padding-right:          0;\r
+   padding-bottom:         0;\r
+   margin-top:             39px;\r
+   margin-left:            36px;\r
+   margin-bottom:          0;\r
+   margin-right:           0;\r
+   border:                 0;\r
+   width:                  202;\r
+   height:                 152;\r
+}\r
+\r
+img.bubbleimg_down {\r
+   padding-top:            0;\r
+   padding-left:           0;\r
+   padding-right:          0;\r
+   padding-bottom:         0;\r
+   margin-top:             34px;\r
+   margin-left:            36px;\r
+   margin-bottom:          0;\r
+   margin-right:           0;\r
+   border:                 0;\r
+   width:                  202;\r
+   height:                 152;\r
+}\r
+\r
 a {\r
    font-size:              14px;\r
    color:                  #008200;\r

diff --git a/templates/bubble_details.tpl b/templates/bubble_details.tpl
new file mode 100644 (file)
index 0000000..f653454
--- /dev/null
+++ b/templates/bubble_details.tpl
@@ -0,0 +1,13 @@
+<table>
+ <tr>
+  <td>
+   <img class="{$image_id}" src="{$image_url}" />
+  </td>
+ </tr>
+ <tr>
+  <td style="text-align: center">
+   {$file_name}<br />
+   {$file_size}kb, {$width}x{$height}
+  </td>
+ </tr>
+</table>