From d902cdfd067b6ae1356c537b4d5605307f3ed524 Mon Sep 17 00:00:00 2001 From: Andreas Unterkircher Date: Thu, 7 Jun 2007 15:09:29 +0000 Subject: [PATCH] show additional infos in the image preview bubble git-svn-id: file:///var/lib/svn/phpfspot/trunk@40 fa6a889d-dae6-447d-9e79-4ba9a3039384 --- bubble.js | 33 ++++++++++++++++++--------------- phpfspot.class.php | 26 ++++++++++++++++++++++++++ phpfspot.js | 5 +++++ phpfspot_cfg.php | 2 +- rpc.php | 5 +++++ stylesheet.css | 28 ++++++++++++++++++++++++++++ templates/bubble_details.tpl | 13 +++++++++++++ 7 files changed, 96 insertions(+), 16 deletions(-) create mode 100644 templates/bubble_details.tpl 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 @@ + + + + + + + +
+ +
+ {$file_name}
+ {$file_size}kb, {$width}x{$height} +
-- 2.25.1