From 02bff4b976056db5ad5ccb3b44164b776d2ed72c Mon Sep 17 00:00:00 2001
From: Andreas Unterkircher <unki@netshadow.at>
Date: Sat, 19 Jan 2008 18:29:43 +0100
Subject: [PATCH] issue101, zooming

Signed-off-by: Andreas Unterkircher <unki@netshadow.at>
---
 phpfspot.js                               |  60 ++++++++++++++++++++++
 resources/zoom-100.png                    | Bin 0 -> 2075 bytes
 resources/zoom-in.png                     | Bin 0 -> 2062 bytes
 resources/zoom-out.png                    | Bin 0 -> 1947 bytes
 themes/default/stylesheet.css             |   3 ++
 themes/default/templates/single_photo.tpl |   9 +++-
 6 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 resources/zoom-100.png
 create mode 100644 resources/zoom-in.png
 create mode 100644 resources/zoom-out.png

diff --git a/phpfspot.js b/phpfspot.js
index 74ad4b9..d8290ad 100644
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -13,6 +13,11 @@ function showImage(id, scrollup)
    if(scrollup != undefined) {
       window.scrollTo(0,0);
    }
+
+   /* delete some global vars */
+   delete(origHeight);
+   delete(origWidth);
+   delete(photo_details_pos);
 }
 
 function moveToThumb(thumb_id)
@@ -249,6 +254,58 @@ function getPhotoToShow()
    return photo_to_show;
 }
 
+function zoom(mod)
+{
+   if(mod == undefined)
+      return;
+
+   if(photo = document.getElementById('photo')) {
+
+      if(origWidth == undefined)
+         origWidth = photo.width;
+      if(origHeight == undefined)
+         origHeight = photo.height;
+
+      if(mod != 0) {
+         new_w = photo.width * (1 + mod/100);
+         new_h = photo.height * (1 + mod/100);
+         photo.width = new_w;
+         photo.height = new_h;
+
+         if(photo_details_pos == undefined) {
+            photo_details_pos = document.getElementById('photo_details').offsetLeft;
+         }
+
+         if((photo.offsetLeft + new_w) >= photo_details_pos-20) {
+            hidePhotoDetails('true');
+         }
+         else {
+            hidePhotoDetails('false');
+         }
+      }
+      else {
+         photo.width = origWidth;
+         photo.height = origHeight;
+         hidePhotoDetails('false');
+      }
+   }
+
+} // zoom()
+
+function hidePhotoDetails(mode)
+{
+   if(photo_details = document.getElementById('photo_details')) {
+      if(mode == 'true') {
+         photo_details.style.visibility = 'hidden';
+         photo_details.style.display = 'none';
+      }
+      else {
+         photo_details.style.visibility = 'visible';
+         photo_details.style.display = 'inline';
+      }
+   }
+} // hidePhotoDetails()
+
 function showCalendar(date_box, click_obj)
 {
    var calendar = document.getElementById('calendar');
@@ -509,3 +566,6 @@ var autobrowse = 0;
 var sliding = 0;
 var sliding_paused = 0;
 var sliding_time = 3;
+var origHeight;
+var origWidth;
+var photo_details_pos;
diff --git a/resources/zoom-100.png b/resources/zoom-100.png
new file mode 100644
index 0000000000000000000000000000000000000000..aad8b325dbb68ea69f7f18fe45469c71034ca353
GIT binary patch
literal 2075
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
FV1hgK1Hu3R

literal 0
HcmV?d00001

diff --git a/resources/zoom-in.png b/resources/zoom-in.png
new file mode 100644
index 0000000000000000000000000000000000000000..b63f0e54fdde4bd7d394414fedecda22c2f3fc48
GIT binary patch
literal 2062
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

literal 0
HcmV?d00001

diff --git a/resources/zoom-out.png b/resources/zoom-out.png
new file mode 100644
index 0000000000000000000000000000000000000000..31034a0089515498202f37fd32341006ec0c13af
GIT binary patch
literal 1947
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

literal 0
HcmV?d00001

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
index 7eede84..ebe9892 100644
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@ -158,6 +158,9 @@ div.thumb a.thumblink:hover {
    border-radius:          1em;
    border:                 dashed 1px #888888;
    z-index:                100;
+   float:                  right;
+   margin-top:             20px;
+   margin-right:           20px;
 }
 
 #available_tags,#selected_tags {
diff --git a/themes/default/templates/single_photo.tpl b/themes/default/templates/single_photo.tpl
index 62a2bf7..b9693c6 100644
--- a/themes/default/templates/single_photo.tpl
+++ b/themes/default/templates/single_photo.tpl
@@ -15,6 +15,9 @@
   {/if}
  </div>
  <div style="text-align: right;">
+  <a href="javascript:zoom(-10);" title="zoom_out" onclick="click(this);"><img src="resources/zoom-out.png" /></a>
+  <a href="javascript:zoom(0);" title="zoom_in" onclick="click(this);"><img src="resources/zoom-100.png" /></a>
+  <a href="javascript:zoom(10);" title="zoom_in" onclick="click(this);"><img src="resources/zoom-in.png" /></a>
   <a href="javascript:startAutoBrowse();" title="auto browsing"><img id="autobrowse_ico" src="resources/32_play.png" /></a>
   {if $extern_link }
    <a href="{$extern_link}" title="Use this link to return to the current view"><img src="resources/link.png" /></a>
@@ -62,16 +65,20 @@
    { /if}
  </div>
 
+ <!-- the photo itself -->
+
  <div style="text-align: left; margin-top: 20px; margin-left: 20px;">
  { if $next_url == "" }
   <a href="javascript:showPhotoIndex();" onclick="click(this);" name="photo">
  { else }
   <a href="{$next_url}" onclick="click(this);" title="click for the next photo" name="photo">
  { /if }
-   <img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" />
+   <img src="{$image_url}" width="{$width}" height="{$height}" alt="{$image_filename}" id="photo" />
   </a>
  </div>
 
+ <!-- navigation arrows -->
+
  <div style="margin-left: 20px;">
   { if $previous_url == "" }
    <img src="resources/arrow_left_gray.png" alt="first photo reached" />
-- 
2.25.1