issue101, zooming

Signed-off-by: Andreas Unterkircher <unki@netshadow.at>

6 files changed, 71 insertions, 1 deletions

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 0000000..aad8b32
--- /dev/null
+++ b/resources/zoom-100.png
diff --git a/resources/zoom-in.png b/resources/zoom-in.png
new file mode 100644
index 0000000..b63f0e5
--- /dev/null
+++ b/resources/zoom-in.png
diff --git a/resources/zoom-out.png b/resources/zoom-out.png
new file mode 100644
index 0000000..31034a0
--- /dev/null
+++ b/resources/zoom-out.png
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" />