show additional infos in the image preview bubble

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

7 files changed, 96 insertions, 16 deletions

diff --git a/bubble.js b/bubble.js
index 600407b..1d715b1 100644
--- a/bubble.js
+++ b/bubble.js
@@ -39,9 +39,11 @@ function bindBubbles(e){
       if(window.addEventListener){

          lbActions[i].addEventListener("mouseover",attachBubble,false);

          lbActions[i].addEventListener("mouseout",detachBubble,false);

+         lbActions[i].addEventListener("click",detachBubble,false);

       }else{

          lbActions[i].attachEvent("onmouseover",attachBubble);

          lbActions[i].attachEvent("onmouseout",detachBubble);

+         lbActions[i].attachEvent("onclick",detachBubble);

       }

    }

 }

@@ -67,26 +69,26 @@ function attachBubble(_b){
 

    // should the bubble be displayed above or below the object

    if(cur_height >= get_page_height()) {

-      var _f=findPos(_c)[1]-283;

-      var _mT=16;

-      var _mL=12;

+      var _f=findPos(_c)[1]-363;

+      var _mL=2;

+      var _mT=39;

       bubbleImage = bubbleImageUp;

    }

    else {

       var _f=findPos(_c)[1]+17;

-      var _mT=27;

-      var _mL=12;

+      var _mL=2;

+      var _mT=34;

       bubbleImage = bubbleImageDown;

    }

 

    if (BrowserDetect.browser == 'Explorer') {

-      _10.style.width="240px";

+      _10.style.width="275px";

       _10.style.position="absolute";

       _10.style.top=_f;

       _10.style.zIndex=99999;

       _10.style.left=_e;

       _10.style.textAlign="left";

-      _10.style.height="190px";

+      _10.style.height="275px";

       _10.style.paddingTop="0";

       _10.style.paddingLeft="0";

       _10.style.paddingBottom="0";

@@ -97,17 +99,24 @@ function attachBubble(_b){
       _10.style.marginRight="0";

       _10.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + bubbleImage + "',sizingMethod='image')";

    } else {

-      _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;");

+      _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;");

    }

 

    if (BrowserDetect.browser == 'Safari' || BrowserDetect.browser == 'Konqueror' ) {

 

       var _height = _f;

     

-      _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;");

+      _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;");

     

    }

 

+   if(cur_height >= get_page_height()) 

+      showBubbleDetails(_10, _c.id, 'up');

+   else

+      showBubbleDetails(_10, _c.id, 'down');

+

+   return;

+

    var img=document.createElement("img");

    _10.appendChild(img);

 

@@ -141,12 +150,6 @@ function detachBubble(_12){
    }

 }

 

-/*if(window.addEventListener){

-   addEventListener("load",bindBubbles,false);

-}else{

-   attachEvent("onload",bindBubbles);

-}*/

-

 function findPos(obj){

    var _14=curtop=0;

    if(obj.offsetParent){

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 5b18be5..ab5cb9e 100644
--- 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 c2fe0d6..23a7130 100644
--- 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 1be6325..f01955c 100644
--- 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 cffb4ed..48b4c40 100644
--- 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 02f69a4..c21e3ff 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -64,6 +64,34 @@ img {
 img.thumb {

 }

 

+img.bubbleimg_up {

+   padding-top:            0;

+   padding-left:           0;

+   padding-right:          0;

+   padding-bottom:         0;

+   margin-top:             39px;

+   margin-left:            36px;

+   margin-bottom:          0;

+   margin-right:           0;

+   border:                 0;

+   width:                  202;

+   height:                 152;

+}

+

+img.bubbleimg_down {

+   padding-top:            0;

+   padding-left:           0;

+   padding-right:          0;

+   padding-bottom:         0;

+   margin-top:             34px;

+   margin-left:            36px;

+   margin-bottom:          0;

+   margin-right:           0;

+   border:                 0;

+   width:                  202;

+   height:                 152;

+}

+

 a {

    font-size:              14px;

    color:                  #008200;

diff --git a/templates/bubble_details.tpl b/templates/bubble_details.tpl
new file mode 100644
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>