summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--bubble.js33
-rw-r--r--phpfspot.class.php26
-rw-r--r--phpfspot.js5
-rw-r--r--phpfspot_cfg.php2
-rw-r--r--rpc.php5
-rw-r--r--stylesheet.css28
-rw-r--r--templates/bubble_details.tpl13
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>
generated by cgit.