EDIT: 22. Juli 2005 --> IE-Tauglichkeit
Hallo,
ich habe mir gerade eine super einfache Galerie für Fotos zusammengehackt.
Das Modul ist nicht für viele Bilder auf einer Seite geeignet (wg. Ladezeit) aber bestimmt für das Eine oder Andere zu mißbrauchen.
Das schöne an dem Modul ist, man packt immer nur ein Bild als Modul zu seiner Seite. Die Bilder werden der Reihe nach gestapelt.
Zusätzlich werden die Bildinformationen aus der DB geholt und mit angezeigt.
Die Bilder werden in der Übersicht verkleinert angezeigt und erst wenn man mit dem Mauszeiger über das Bild rutscht wird per CSS ein 'PopUp' mit dem großen Bild angezeigt.
Hier der Code
Eingabe
Code: Alles auswählen
REX_MEDIA_BUTTON[1]
<?php
if ("REX_FILE[1]" != ""){
echo "<img src=$REX[HTDOCS_PATH]/files/REX_FILE[1]>";
}
?><br><br>
Code: Alles auswählen
<?php
if ("REX_FILE[1]" != ""){
// build the sql-statement and get the result
$sql = "select * from rex_file where filename='REX_FILE[1]'";
$GC = new sql;
$GC->setQuery($sql);
// walking thru the results
for ($i=0;$i<$GC->getRows();$i++) {
// get the picture informations
$title = $GC->getValue("rex_file.title");
$description = $GC->getValue("rex_file.description");
$width = $GC->getValue("rex_file.width");
$height = $GC->getValue("rex_file.height");
// show the thumbnail
echo "<div class=\"galeriethumb\">";
echo "<a href=\"\">";
echo "<img src=\"$REX[HTDOCS_PATH]/files/REX_FILE[1]\" width=\"80\" alt=\"$title\" />";
echo "<span>\n";
echo "<h3>$title</h3>\n";
echo "<img src=\"$REX[HTDOCS_PATH]/files/REX_FILE[1]\" width=\"$width\" height=\"$height\" alt=\"$description\" />\n";
echo "<p>$description</p>\n";
echo "</span>\n";
echo "</a>\n";
echo "</div>\n";
$GC->next();
};
};
?>
Code: Alles auswählen
.galeriethumb {
float: left;
width:80px;
padding:0;
margin:20px;
border:1px solid #4fa51d;
font:bold 14px verdana, sans-serif;
}
.galeriethumb img {
border:none;
}
.galeriethumb a {
z-index:24;
}
.galeriethumb a:hover {
z-index:25;
border:0px solid #4fa51d;
}
.galeriethumb a span {
display:none;
z-index:25;
}
.galeriethumb a:hover span {
display:block;
width:350px;
position:absolute;top:0px;right:-1px;
border:1px dashed grey;
padding:15px;
font:normal 14px verdana, sans-serif;
background-color: #ffea87;
z-index:1;
}
Gruß,
Carsten
ToDo: OOMedia