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

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 818aca658730bf4e0468a9735711abc612ebafc7..d6d3e691902f019bab998e5abd22a291ab4f7de8 100644 (file)
--- 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 22840b7990630a18463ea78cb95327a3ede8ce50..2132ea511617c52842823f0609e511840e598dc9 100644 (file)
--- 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 8da852227223cc449235e78afc6bde8efc7a24f7..e924b4b77f495ab9ebf166393891ea54fffee48f 100644 (file)
--- a/stylesheet.css
+++ b/stylesheet.css
@@ -119,26 +119,29 @@ a.smalltag:hover {
    color:                  #00aa44;\r
 }\r
 \r
+a.thumblink {\r
+   font-size:              12px;\r
+}\r
+\r
+a.thumblink:hover {\r
+   color:                  #4761ab;\r
+}\r
+\r
 #matrix,#single {\r
    padding:                10px;\r
 }\r
 \r
 td.thumb {\r
-   padding:                1px;\r
+   padding:                5px;\r
    text-align:             center;\r
 }\r
 \r
-#outter {\r
-   padding:                10px;\r
-   background-color:       #eeeeee;\r
-}\r
-\r
 #inner {\r
-   padding:                7px;\r
-   -moz-border-radius:     1em;\r
-   border-radius:          1em;\r
+   padding:                10px;\r
+   -moz-border-radius:     3px;\r
+   border-radius:          3px;\r
    border:                 dashed 1px #888888;\r
-\r
+   background-color:       #eeeeee;\r
 }\r
 \r
 #photo_details {\r

diff --git a/templates/photo_index.tpl b/templates/photo_index.tpl
index 87cd6aaee906567dff898deefdde21ffefafc15f..6c7af4ab2375379768cd3cd426f7d03d779d44a6 100644 (file)
--- 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 -->