issue102, use javascript to jump to the correct thumbnail when returing from photo-view

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

5 files changed, 49 insertions, 21 deletions

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 17ec450..f1b0dc6 100644
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@ -503,7 +503,8 @@ class PHPFSPOT {
       $this->tmpl->assign('image_filename', $this->parse_uri($details['uri'], 'filename'));
 
       $this->tmpl->assign('tags', $this->get_photo_tags($photo));
-      $this->tmpl->assign('current', $this->getCurrentPage($current, $count));
+      $this->tmpl->assign('current_page', $this->getCurrentPage($current, $count));
+      $this->tmpl->assign('current_img', $photo);
 
       if($previous_img) {
          $this->tmpl->assign('previous_url', "javascript:showImage(". $previous_img .");");
@@ -952,9 +953,6 @@ class PHPFSPOT {
 
       $count = count($photos);
 
-      if(isset($_SESSION['begin_with']) && $_SESSION['begin_with'] != "")
-         $anchor = $_SESSION['begin_with'];
-
       /* if all thumbnails should be shown on one page */
       if(!isset($this->cfg->thumbs_per_page) || $this->cfg->thumbs_per_page == 0) {
          $begin_with = 0;
@@ -1130,8 +1128,14 @@ class PHPFSPOT {
 
       $this->tmpl->show("photo_index.tpl");
 
-      if(isset($anchor))
-         print "<script language=\"JavaScript\">self.location.hash = '#image". $anchor ."';</script>\n";
+      /* if we are returning to photo index from an photo-view,
+         scroll the window to the last shown photo-thumbnail.
+         after this, unset the last_photo session variable.
+      */
+      if(isset($_SESSION['last_photo'])) {
+         print "<script language=\"JavaScript\">moveToThumb(". $_SESSION['last_photo'] .");</script>\n";
+         unset($_SESSION['last_photo']);
+      }
 
    } // showPhotoIndex()
 
diff --git a/phpfspot.js b/phpfspot.js
index 21a027a..e24d0aa 100644
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -8,6 +8,17 @@ function showImage(id, scrollup)
    }
 }
 
+function moveToThumb(thumb_id)
+{
+   if(thumb_id == undefined)
+      return;
+
+   if(thumbimg = document.getElementById('thumbimg' + thumb_id)) {
+      window.scrollTo(0, thumbimg.offsetTop-100);
+   }
+
+} // moveToThumb()
+
 function showCredits()
 {
    var credits = document.getElementById("content");
@@ -62,13 +73,17 @@ function refreshSelectedTags()
    selected_tags.innerHTML = HTML_AJAX.grab(encodeURI('rpc.php?action=show_selected_tags'));
 }
 
-function showPhotoIndex(begin_with)
+function showPhotoIndex(begin_with, last_photo)
 {
-   if(begin_with == undefined)
-      HTML_AJAX.replace(document.getElementById("content"), encodeURI('rpc.php?action=show_photo_index'));
-   else
-      HTML_AJAX.replace(document.getElementById("content"), encodeURI('rpc.php?action=show_photo_index&begin_with=' + begin_with));
-}
+   var url = "rpc.php?action=show_photo_index";
+   if(begin_with != undefined)
+      url = url + '&begin_with=' + begin_with;
+   if(last_photo != undefined)
+      url = url + '&last_photo=' + last_photo;
+
+   HTML_AJAX.replace(document.getElementById("content"), encodeURI(url));
+
+} // showPhotoIndex()
 
 // if photo index is currently shown, refresh it
 function refreshPhotoIndex()
diff --git a/rpc.php b/rpc.php
index 4bb2973..ad80ca5 100644
--- a/rpc.php
+++ b/rpc.php
@@ -99,6 +99,9 @@ class PHPFSPOT_RPC {
             else {
                unset($_SESSION['begin_with']);
             }
+            if(isset($_GET['last_photo']) && is_numeric($_GET['last_photo']))
+               $_SESSION['last_photo'] = $_GET['last_photo'];
+
             $fspot->showPhotoIndex();
             break;
    
diff --git a/themes/default/templates/photo_index.tpl b/themes/default/templates/photo_index.tpl
index 717b3f2..dff6ab1 100644
--- a/themes/default/templates/photo_index.tpl
+++ b/themes/default/templates/photo_index.tpl
@@ -43,17 +43,23 @@
 </div>
 
 <div id="index">
+
  {section name="thumb" loop=$thumbs step=1}
+
   {if $images[thumb] }
-    <div class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');" style="width: { $thumb_container_width }px; height: { $thumb_container_height }px;">
-     <a href="javascript:showImage({$images[thumb]}, 'scrollup');" id="{$images[thumb]}" name="image{$img_id[thumb]}" class="thumblink" onclick="click(this);" title="{$img_title[thumb]}">
-      <img class="thumb" id="{$images[thumb]}" src="phpfspot_img.php?idx={$images[thumb]}&amp;width={$width}" alt="thumb_{$images[thumb]}" width="{$img_width[thumb]}" height="{$img_height[thumb]}" />
-      <br />
-     {$img_name[thumb]}
-     </a>
-    </div>
-   {/if}
+
+   <div class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');" style="width: { $thumb_container_width }px; height: { $thumb_container_height }px;">
+    <a href="javascript:showImage({$images[thumb]}, 'scrollup');" id="thumblink{$images[thumb]}" name="image{$img_id[thumb]}" class="thumblink" onclick="click(this);" title="{$img_title[thumb]}">
+     <img class="thumb" id="thumbimg{$images[thumb]}" src="phpfspot_img.php?idx={$images[thumb]}&amp;width={$width}" alt="thumb_{$images[thumb]}" width="{$img_width[thumb]}" height="{$img_height[thumb]}" />
+     <br />
+    {$img_name[thumb]}
+    </a>
+   </div>
+
+  {/if}
+
  {/section} 
+
 </div>
 <br class="clearboth" />
 <div style="width: 100%; margin-top: 20px;">
diff --git a/themes/default/templates/single_photo.tpl b/themes/default/templates/single_photo.tpl
index 2032f52..62a2bf7 100644
--- a/themes/default/templates/single_photo.tpl
+++ b/themes/default/templates/single_photo.tpl
@@ -80,7 +80,7 @@
     <img src="resources/arrow_left.png" alt="previous photo" />
    </a>
   { /if }
-   <a href="javascript:showPhotoIndex({$current});" onclick="click(this);" title="click to go back to the index">
+   <a href="javascript:showPhotoIndex({$current_page}, {$current_img});" onclick="click(this);" title="click to go back to the index">
     <img src="resources/arrow_up.png" alt="photo index" />
    </a>
   { if $next_url == "" }