From 8f3e27ca1aea300a47d35b9474c8f5fd588460da Mon Sep 17 00:00:00 2001
From: Andreas Unterkircher <unki@netshadow.at>
Date: Fri, 6 Jul 2007 16:53:10 +0000
Subject: [PATCH] issue21, reordered photo index and added some nice mouseover
 effect

git-svn-id: file:///var/lib/svn/phpfspot/trunk@166 fa6a889d-dae6-447d-9e79-4ba9a3039384
---
 phpfspot.class.php        | 11 +++++++++++
 phpfspot.js               | 10 ++++++++++
 stylesheet.css            | 23 +++++++++++++----------
 templates/photo_index.tpl | 12 ++++++------
 4 files changed, 40 insertions(+), 16 deletions(-)

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 818aca6..d6d3e69 100644
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@ -112,6 +112,14 @@ class PHPFSPOT {
 
    } // get_photo_details
 
+   public function getPhotoName($idx)
+   {
+      $details = $this->get_photo_details($idx);
+
+      return $details['name'];
+
+   } // getPhotoName()
+
    public function translate_path($path, $width = 0)
    {  
       return str_replace($this->cfg->path_replace_from, $this->cfg->path_replace_to, $path);
@@ -439,11 +447,13 @@ class PHPFSPOT {
       $img_height[$rows] = Array();
       $img_width[$rows] = Array();
       $img_id[$rows] = Array();
+      $img_name[$rows] = Array();
 
       for($i = $begin_with; $i < $end_with; $i++) {
 
          $images[$rows][$cols] = $photos[$i];
          $img_id[$rows][$cols] = $i;
+         $img_name[$rows][$cols] = $this->getPhotoName($photos[$i]);
 
          $thumb_path = $this->cfg->base_path ."/thumbs/". $this->cfg->thumb_width ."_". $this->getMD5($photos[$i]);
 
@@ -544,6 +554,7 @@ class PHPFSPOT {
       $this->tmpl->assign('img_width', $img_width);
       $this->tmpl->assign('img_height', $img_height);
       $this->tmpl->assign('img_id', $img_id);
+      $this->tmpl->assign('img_name', $img_name);
       $this->tmpl->assign('rows', $rows);
       $this->tmpl->assign('columns', $this->cfg->thumbs_per_row);
 
diff --git a/phpfspot.js b/phpfspot.js
index 22840b7..2132ea5 100644
--- a/phpfspot.js
+++ b/phpfspot.js
@@ -129,5 +129,15 @@ function init_phpfspot()
    }
 }
 
+function setBackGrdColor(item, color)
+{
+   if(color == 'mouseover')
+      item.style.backgroundColor='#c6e9ff';
+   if(color == 'mouseout')
+      item.style.backgroundColor='#eeeeee';
+   if(color == 'mouseclick')
+      item.style.backgroundColor='#93A8CA';
+}
+
 var startup = 1;
 
diff --git a/stylesheet.css b/stylesheet.css
index 8da8522..e924b4b 100644
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -119,26 +119,29 @@ a.smalltag:hover {
    color:                  #00aa44;
 }
 
+a.thumblink {
+   font-size:              12px;
+}
+
+a.thumblink:hover {
+   color:                  #4761ab;
+}
+
 #matrix,#single {
    padding:                10px;
 }
 
 td.thumb {
-   padding:                1px;
+   padding:                5px;
    text-align:             center;
 }
 
-#outter {
-   padding:                10px;
-   background-color:       #eeeeee;
-}
-
 #inner {
-   padding:                7px;
-   -moz-border-radius:     1em;
-   border-radius:          1em;
+   padding:                10px;
+   -moz-border-radius:     3px;
+   border-radius:          3px;
    border:                 dashed 1px #888888;
-
+   background-color:       #eeeeee;
 }
 
 #photo_details {
diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl
index 87cd6aa..6c7af4a 100644
--- a/templates/photo_index.tpl
+++ b/templates/photo_index.tpl
@@ -1,4 +1,4 @@
-<!-- Image Matrix -->
+<!-- Photo Index -->
 <table>
  <tr>
   <td colspan="3">
@@ -38,13 +38,13 @@
     {section name="col" loop=$columns step=1}
      <td class="thumb">
       {if $images[row][col] }
-      <div id="outter">
-      <div id="inner">
-       <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" name="image{$img_id[row][col]}">
+      <div id="inner" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');">
+       <a href="javascript:showImage({$images[row][col]});" id="{$images[row][col]}" name="image{$img_id[row][col]}" class="thumblink">
         <img class="thumb" id="{$images[row][col]}" src="phpfspot_img.php?idx={$images[row][col]}&amp;width={$width}" alt="thumb_{$images[row][col]}" width="{$img_width[row][col]}" height="{$img_height[row][col]}" />
+        <br />
+        {$img_name[row][col]}
        </a>
       </div>
-      </div>
       {else}
        &nbsp;
       {/if}
@@ -84,4 +84,4 @@
   </td>
  </tr>
 </table>
-<!-- /Image Matrix -->
+<!-- /Photo Index -->
-- 
2.17.1