issue59, thumbnail matrix is now also free off HTML tables

diff --git a/phpfspot.class.php b/phpfspot.class.php
index 9e78d1dcfe7ba06000fa5a7a19f1215cf3ac1eb0..99f5a173f97601e899b4ae593dcfb00aa0f32ef1 100644 (file)
--- a/phpfspot.class.php
+++ b/phpfspot.class.php
@@ -1094,6 +1094,8 @@ class PHPFSPOT {
       $this->tmpl->assign('rss_link', $rss_link);
       $this->tmpl->assign('count', $count);
       $this->tmpl->assign('width', $this->cfg->thumb_width);
+      $this->tmpl->assign('thumb_container_width', $this->cfg->thumb_width+20);
+      $this->tmpl->assign('thumb_container_height', $this->cfg->thumb_height);
       $this->tmpl->assign('images', $images);
       $this->tmpl->assign('img_width', $img_width);
       $this->tmpl->assign('img_height', $img_height);

diff --git a/themes/default/stylesheet.css b/themes/default/stylesheet.css
index b07fff1e27eac4a80ba07d053971cb3195844f52..97e4fa8fd06551bc922a3062e3788a27381ee9b6 100644 (file)
--- a/themes/default/stylesheet.css
+++ b/themes/default/stylesheet.css
@@ -101,8 +101,6 @@ img {
    border:                none;
 }
 
-img.thumb {
-}
 
 a {
    font-size:              14px;
@@ -134,18 +132,10 @@ a.smalltag:hover {
    color:                  #00aa44;
 }
 
-a.thumblink {
-   font-size:              12px;
-}
-
 a.calendar {
    font-size:              10px;
 }
 
-a.thumblink:hover {
-   color:                  #4761ab;
-}
-
 #single {
    padding:                10px;
    display:                table;
@@ -168,9 +158,8 @@ table.matrix {
    margin-right:           auto;
 }
 
-td.thumb {
+div.thumb {
    text-align:             center;
-   display:                table-cell;
    vertical-align:         top;
    -moz-border-radius:     3px;
    border-radius:          3px;
@@ -178,8 +167,26 @@ td.thumb {
    margin:                 5px;
    background-color:       #eeeeee;
    padding:                10px;
+   float:                  left;
 }
 
+div.thumb img.thumb {
+   border:                 0px;
+   padding:                0px;
+   margin:                 0px;
+}
+
+div.thumb a.thumblink {
+   font-size:              12px;
+   border:                 0px;
+}
+
+div.thumb a.thumblink:hover {
+   color:                  #4761ab;
+}
+
+.clearboth { clear: both; }
+
 #photo_details {
    width:                  150px;
    font-size:              12px;

diff --git a/themes/default/templates/photo_index.tpl b/themes/default/templates/photo_index.tpl
index 9ceb0dc9f10a97851d15453c9cedeb14b08f867e..1ca25b831e195164ef0060db4f3bf9e4aeeb16e9 100644 (file)
--- a/themes/default/templates/photo_index.tpl
+++ b/themes/default/templates/photo_index.tpl
@@ -46,25 +46,20 @@
  <tr>
   <td colspan="3" style="width: 100%;">
    <div id="adinfo"></div>
-   <table class="matrix" id="matrix">
    {section name="row" loop=$rows step=1}
-    <tr>
     {section name="col" loop=$columns step=1}
       {if $images[row][col] }
-      <td class="thumb" onmouseover="setBackGrdColor(this, 'mouseover');" onmouseout="setBackGrdColor(this, 'mouseout');">
+      <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[row][col]});" id="{$images[row][col]}" name="image{$img_id[row][col]}" class="thumblink" onclick="click(this);" title="{$img_title[row][col]}">
         <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>
-      {else}
-       <td>&nbsp;</td>
       {/if}
     {/section}
-    </tr>
    {/section} 
-   </table>
+   <br class="clearboth" />
   </td>
  </tr>
  <tr>