diff options
| -rw-r--r-- | phpfspot.class.php | 11 | ||||
| -rw-r--r-- | phpfspot.js | 10 | ||||
| -rw-r--r-- | stylesheet.css | 23 | ||||
| -rw-r--r-- | 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]}&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} {/if} @@ -84,4 +84,4 @@ </td> </tr> </table> -<!-- /Image Matrix --> +<!-- /Photo Index --> |