PDA

View Full Version : Adding thumbs to Martius template

Tiestoo
11-25-2007, 07:48 PM
I love the Martius template, but, I want to add thumbs to it. I really like the thumbs from Delicious template, so I'm trying to combine those two (placing the thumbs of Delicious in Martius).

I tried to copy the code from Delicious <div id="thumbnails" style="left:<IMAGE_WIDTH>px;">
<IMAGE_THUMBNAIL_ROW_REV>
</div> <!-- thumbnails --> into Martius.

I also copied the needed thumbnail-CSS code.

But: the Martius template excistst of tables. And Delicious not. So wherever I try to copy the code above, it displays beneath my photo, in case of on the right side of it. Can someone help me with a hint for placing this code? Do I have to make a new table for it (because it seems all things in Martius template are in tables)?

To illustrate I will display the code from Martius image_template.html here also:
<head>
<title><SITE_TITLE></title>
<!-- FAVORITE ICON -->
<link REL="SHORTCUT ICON" HREF="http://www.martius.nl/images/martius.ico">

<!-- META -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="content-type" name="keywords" content="PhotoBlog,<SITE_TITLE>,<IMAGE_TITLE>,Pixelpost" />
<meta http-equiv="content-type" name="description" content="<SITE_TITLE>-PhotoBlog: <IMAGE_TITLE>, <IMAGE_NOTES_CLEAN>" />
<meta name="PBO.auth" content="ff4a14726b8b33a522dab51830dd2451" />

<title><SITE_TITLE></title>

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="templates/martius/css/martius.css" title="martius" />

<!-- Scripts -->
<script type="text/javascript" src="overlib.js"><!-- overLIB (c) Erik Bosrup --></script>
<script type="text/javascript" src="overlib_fade.js"><!-- overLIB (c) Erik Bosrup --></script>
<script type='text/javascript'>
function flip(rid)
{
current=(document.getElementById(rid).style.displa y == 'none') ? 'block' : 'none';
document.getElementById(rid).style.display = current;
}
</script>
</head>

<body>
<div id="overDiv" align="left" style="position:absolute; visibility:hidden; z-index:1000;"></div>


<table width="814" border="0" align="center" cellpadding="0" cellspacing="0"> <!-- 814 -->
<tr>
<td colspan="2" class="celltop">&nbsp;</td>
</tr>
<tr class="celltop">
<td width="462" rowspan="2" bclass="celltop"><div align="left"><img class="title-image" src="templates/martius/images/blauwgestreept_header.jpg" width="194" height="23" alt="" /></div></td>
<td width="338" height="3" class="celltop"></td>
</tr>
<tr>
<td class="celltop"><div align="right"><span class="img-pre-next"><IMAGE_PREVIOUS_LINK></span><a href="index.php" onMouseOver="return overlib('&nbsp;&nbsp;return to most recent image in this photoblog', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">Home</a><span class="img-pre-next"><IMAGE_NEXT_LINK></span>&nbsp;|&nbsp;<a href="index.php?x=browse" onMouseOver="return overlib('&nbsp;&nbsp;overview of all images in this photoblog', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">Browse foto's</a>&nbsp;&nbsp;</div></td>
</tr>
<tr>
<td height="4" colspan="2" class="celltop"></td>
</tr>
<tr>
<td colspan="2">&nbsp;</td>
</tr>
</table>



<table border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#090944">
<tr>
<td><table border="0" cellspacing="5" cellpadding="0" bgcolor="#ECECF0">
<tr>
<td><a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" onMouseOver="return overlib('<b><IMAGE_TITLE></b><br><br>ISO <EXIF_ISO>&nbsp;|<EXIF_EXPOSURE_TIME>&nbsp;|<EXIF_APERTURE>&nbsp;|<EXIF_FOCAL_LENGTH>', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">
<img src="images/<IMAGE_NAME>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" alt="" />


</a>

</td>
</tr>
</td>
</tr>



</table>
</td>
</tr>

</table>

<table width="814" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">&nbsp;</td>
</tr>
<tr class="cellbot">
<td height="4" colspan="2"></td>
</tr>
<tr class="cellbot">
<td width="657"><div align="left">&nbsp;&nbsp;<span class="curview"><IMAGE_NOTES_CLEAN></span></div></td>
<td width="157"><div align="right"><IMAGE_COUNTER_VIEWS>&nbsp;views,&nbsp;<a href="#" onclick="flip('show_comments'); flip('add_comment'); return false;" onMouseOver="return overlib('bekijk alle reacties op deze foto<br>en laat jouw reactie achter', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();"><IMAGE_COMMENTS_NUMBER>&nbsp;reacties</a>&nbsp;&nbsp;</div></td>

<!-- <td width="157"><div align="right"><SITE_RSS_LINK>&nbsp;|&nbsp;&copy;06&nbsp;|&nbsp;<a href="http://www.pixelpost.org" target="_blank" onMouseOver="return overlib('&nbsp;&nbsp;powered by pixelpost', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">pp</a>&nbsp;|&nbsp;<a href="index.php?x=about" onMouseOver="return overlib('&nbsp;&nbsp;information about the publisher of the images and some other stuff', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">about</a>&nbsp;&nbsp;</div></td> -->

</tr>
<tr class="cellbot">
<td colspan="2">
<div id="page_comment">
<div style="clear:both;">
</div>
</div>

<!-- comments -->
<div class="comments">
<div class="comments"><div id="show_comments"><script language='javascript' type='text/javascript'>flip('show_comments');</script>
<div class="commentbody"><GRAVATAR_COMMENTS></div>
</div>
</div>
</div>

<!-- add comment -->
<div align="left" id="add_comment" class="commentbody">
<script language='javascript' type='text/javascript'>flip('add_comment');</script>
<form method='post' action='index.php?x=save_comment' name='commentform' accept-charset='UTF-8'>
&nbsp;&nbsp;Reactie:<br>
&nbsp;&nbsp;<textarea name='message' rows='5' cols='57'></textarea>
<br>
<br>
&nbsp;&nbsp;Naam:<br>
&nbsp;&nbsp;<input type='text' name='name' class='input' value='<VINFO_NAME>' size="35"/>
<br>
<br>
&nbsp;&nbsp;Website:<br>
&nbsp;&nbsp;<input type='text' name='url' class='input' value='<VINFO_URL>' size="35"/>
<br>
<br>
&nbsp;&nbsp;Email (blijft tussen ons):<br>
&nbsp;&nbsp;<input class='input' type='text' name='email' value='<VINFO_EMAIL>' size="35"/>
<br>
<br>
&nbsp;&nbsp;<input type='hidden' name='parent_name' value='<IMAGE_NAME>' />
<input type='checkbox' value='set' name='vcookie' />
Onthoud mij<br>
<br>
&nbsp;&nbsp;<input type='submit' value='add' />
&nbsp;&nbsp;<input type='hidden' name='parent_id' value='<IMAGE_ID>' />
</form>
<br>
</div></td>
</tr>

</table>

</body>
</html>

I hope someone can help me, thanx in advance!
austriaka
11-26-2007, 06:48 AM
change this code part:

<table border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#090944">
<tr>
<td><table border="0" cellspacing="5" cellpadding="0" bgcolor="#ECECF0">
<tr>
<td><a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" onMouseOver="return overlib('<b><IMAGE_TITLE></b><br><br>ISO <EXIF_ISO>&nbsp;|<EXIF_EXPOSURE_TIME>&nbsp;|<EXIF_APERTURE>&nbsp;|<EXIF_FOCAL_LENGTH>', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">
<img src="images/<IMAGE_NAME>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" alt="" />


</a>

</td>
</tr>
</td>
</tr>



</table>
</td>
</tr>
</table>

to this one:
<table border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#090944">
<tr>
<td>
<table border="0" cellspacing="5" cellpadding="0" bgcolor="#ECECF0">
<tr>
<td>
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" onMouseOver="return overlib('<b><IMAGE_TITLE></b><br><br>ISO <EXIF_ISO>&nbsp;|<EXIF_EXPOSURE_TIME>&nbsp;|<EXIF_APERTURE>&nbsp;|<EXIF_FOCAL_LENGTH>', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">
<img src="images/<IMAGE_NAME>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" alt="" /></a>
</td>
</tr>
</table>
</td>
<td align="left" valign="top">
<div id="thumbnails">
<IMAGE_THUMBNAIL_ROW_REV>
</div> <!-- thumbnails -->
</td>
</tr>
</table>

and take care that the #thumbnails has no positioning in the css file
Tiestoo
11-26-2007, 07:15 PM
Thx Austiaka+, that really helped me a lot!!
You can find my photoblog here (http://www.blauwgestreept.nl/index.php). In Safari+FF the thumbs and border are ok now, but in IE I can't get rid of that annoying blue stripe underneath the picture!! (for non-IE'ers check http://img232.imageshack.us/img232/8212/bluestripess3.th.jpg (http://img232.imageshack.us/my.php?image=bluestripess3.jpg))

My image_template-part looks like:<table border="0" align="center" cellpadding="0" cellspacing="1"> <!-- 0 0 1 bgcolor="#090944" -->
<tr>
<td>
<table border="0" cellspacing="3" cellpadding="0" bgcolor="#ECECF0"> <!-- 0 5 0 -->
<tr>
<td valign="top" bgcolor="#090944">
<a href="index.php?showimage=<IMAGE_PREVIOUS_ID>" onMouseOver="return overlib('<b><IMAGE_TITLE></b><br><br>ISO <EXIF_ISO>&nbsp;|<EXIF_EXPOSURE_TIME>&nbsp;|<EXIF_APERTURE>&nbsp;|<EXIF_FOCAL_LENGTH>', BGCOLOR, '#333366', FGCOLOR, '#FFFFFF', OPACITY, '50', FADEIN);" onMouseOut="return nd();">
<img src="images/<IMAGE_NAME>" width="<IMAGE_WIDTH>" height="<IMAGE_HEIGHT>" id="photo" alt="" /></a>
</td> <!-- "index.php?showimage=<IMAGE_PREVIOUS_ID>"-->
</tr>
</table>
</td>
<td width="80" align="left" valign="top">
<div id="thumbnails">
<IMAGE_THUMBNAIL_ROW_REV>
</div> <!-- thumbnails -->
</td>
</tr>
</table>

and CSS:

#photo {
background:#ECECF0;
border:2px solid #ECECF0; /*515151 1px*/
}

Thx for all the help here, I really appreciate that as a n00b!

Last question: Is it a normal issue that the hover effect (opacity=0.75) doesn't work in IE?

CSS:#thumbnails{
/*text-align: center;*/
margin: 2px 10px 0px 3px; /*6:van bovenaf 0 10 4:tussen foto en thumbs*/
/*width:56px; was 56*/
float:left;
/*position:absolute;*/
top:38px; /*60, 45 right*/
margin-left:3px; /*-10, center inc. thumbs: -31*/
}

.thumbnails {
border:1px solid white;
margin:0px 10px 3px 1px; /*0 1 2 1*/
filter:alpha(opacity=50);
-moz-opacity:.50;
opacity:.50;
}

.current-thumbnail{
border:1px solid white;
margin:0 10px 3px 1px; /*0 1 2 1*/
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

.thumbnails:hover {
border:1px solid white;
margin:0 10px 3px 1px;
filter:alpha(opacity=75);
-moz-opacity:.75;
opacity:.75;
}
austriaka
11-26-2007, 10:12 PM
try putting border="0" into the <img ... > tag of the html page.
Try using the rgb colour for your background and border in style sheet: rgb(236,236,240) instead of #ECECF0 (shoud not hurt IE7, I know)

the hover effect should work in IE if you define the :hover for the link
(#thumbnails a and #thumbnails a:hover). Then it should work even with IE6. But google for :hover and IE, there are some tricks and issues...
Tiestoo
11-28-2007, 11:57 AM
Thanks austriaka+, I really appreciate your help.
Unfortunately, both tips didn't work.

Blue-stripe problem:

adding the border tag didn't change anything in IE. BUT, I accidently discovered which line is responsible for the blue stripe, it is the 6th line in the code of my previous post:

<td valign="top" bgcolor="#090944">

--> When I change the bgcolor, the blue stripe dissapears. So when changing it to the same color as the border, the blue stripe is gone, but, the border on de downside of the picture is still a few pixels to wide!!

Hover problem:

I tried several things, like adding a behavior for IE (http://users.hszk.bme.hu/~hj130/css/list_menu/hover/index.html) or changing the code like this (http://www.pixelpost.org/forum/showpost.php?p=8324&postcount=7) (changing the CSS with a:hover) but non of this showed the hover-effect in IE.

Maybe someone has some fresh tips for me I can try now?
I'd love to solve these two problems :-)