Ok, hier der Quelltext
Ich hoffe ich finde die Galerie, die ich programmiere nicht später irgendwo im Netz... Habe da schon einiges mit Foren erlebt...
{foreach item=bild from=$imagelist}
<div class="g_float_item" id="picfield_{$bild.id}" onmousedown="return false;" onselectstart="return false;"
onclick="galleryPictureClick('{$userid}','{$albumid}','{$bild.id}','g_float_item','g_float_item_sel');">
<table>
<tr>
<td><img src="gallery.php?mode=get_picture&size=thumbnail&pictureid={$bild.id}" alt="{$bild.pic_title}" /></td>
</tr>
<tr>
<td class="g_float_image_title" id="g_float_image_title_{$bild.id}">{$bild.short_title}</td>
</tr>
</table>
<div id="picinf_{$bild.id}">
<table width="100%" class="g_float_picinf_table">
<tr height="20px">
<td colspan="2"><b style="font-size: 10pt;">{$bild.pic_title}</b></td>
</tr>
<tr height="20px">
<td width="90px">Hochgeladen am:</td>
<td>{$bild.pic_uploaded}</td>
</tr>
<tr>
<td style="vertical-align:top;">Beschreibung:</td>
<td>{$bild.short_description}</td>
</tr>
</table>
</div>
</div>
{/foreach}
CSS:
/* Gallery floating configuration */
div.g_float_item {
border: #265784 1px solid;
background-color: #30608C;
padding: 2px;
margin: 2px;
width: 132px;
height: 156px;
float: left;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
div.g_float_item_sel {
border: #265784 1px solid;
background-color: #FF9900;
padding: 2px;
margin: 2px;
width: 132px;
height: 156px;
float: left;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
div.g_float_item_sel div,
div.g_float_item_album_sel div,
div.g_float_item div,
div.g_float_item_album div {
visibility: hidden;
position: absolute;
margin-top: -16px;
margin-left: -1px;
padding: 4px;
text-align: left;
border: 0px;
background-color: #134261;
}
div.g_float_item_sel:hover div,
div.g_float_item:hover div,
div.g_float_item_album_sel:hover div,
div.g_float_item_album:hover div {
visibility: visible;
}
div.g_float_item:hover {
border-style: solid;
border-width: 1px;
border-color: #90CBFF #134261 #134261 #90CBFF;
background-color: #41729B;
}
div.g_float_item_sel:hover {
border-style: solid;
border-width: 1px;
border-color: #90CBFF #134261 #134261 #90CBFF;
background-color: #FF9900;
}
table.g_float_picinf_table {
margin: 0px;
padding: 0px;
width: 100%;
border-collapse: collapse;
font-size: 8pt;
}
table.g_float_picinf_table tr {
text-align: left;
}
div.g_float_item table,
div.g_float_item_album table,
div.g_float_item_sel table,
div.g_float_item_album_sel table {
margin: 0px;
padding: 0px;
width: 100%;
height: 100%;
text-align: center;
border-collapse: collapse;
}
div.g_float_item tr,
div.g_float_item_album tr,
div.g_float_item_sel tr,
div.g_float_item_album_sel tr,
table img {
margin: 0;
padding: 0;
}
td.g_float_image_title {
font-size: 8pt;
font-weight: bold;
margin: 0px;
padding: 0px;
height: 8px;
background-color: #134261;
}
/* Für die Albumansicht */
div.g_float_item_album {
border-style: solid;
border-width: 1px;
border-color: #265784;
background-color: #30608C;
padding: 2px;
margin: 2px;
width: 160px;
height: 176px;
float: left;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
div.g_float_item_album_sel {
border-style: solid;
border-width: 1px;
border-color: #265784;
background-color: #FF9900;
padding: 2px;
margin: 2px;
width: 160px;
height: 176px;
float: left;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
}
div.g_float_item_album:hover {
border-style: solid;
border-width: 1px;
border-color: #90CBFF #134261 #134261 #90CBFF;
background-color: #41729B;
}
div.g_float_item_album_sel:hover {
border-style: solid;
border-width: 1px;
border-color: #90CBFF #134261 #134261 #90CBFF;
background-color: #FF9900;
}
td.g_float_album_image {
margin: 0;
padding: 0;
background-image: url(../images/photoalbumfolder.png);
}
div.imgbigcont {
position: absolute;
display: none;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #2B597A;
}