In der Basisversion durchsucht unser kurzes Skript ein Verzeichnis und listet alle Bild-Dateien verkleinert in einer Tabelle auf. Ein Klick öffnet ein Fenster mit dem Bild im Originalformat.
< ?php $dir = "../muster/bildershow"; $handle=opendir($dir); $hoehe_klein = 40; $breite_klein = 40; $tabelle_max = 300; $tabellen_zellen = floor($tabelle_max / $breite_klein); $zaehler = 0; echo "
„; while ($file = readdir ($handle)) { if(ereg(„_klein.gif“, $file) || ereg(„_klein.jpg“, $file) || ereg(„_klein.png“, $file) ) { $datei = „$dir/“.str_replace(„_klein“,““,$file); $size = getimagesize($datei); $breite = $size[0]; $hoehe = $size[1]; if($zaehler >= $tabellen_zellen) { echo ‚
‚; $zaehler = 1; } else { $zaehler++; } echo ‚
|
‚; } } echo ‚
‚; ?>
Quellcode für die Hauptdatei
<html>
<?php
$dir
= "bilder_ordner";
$handle=opendir($dir);
$hoehe_klein
= 40;
$breite_klein = 40;
$tabelle_max = 300;
$tabellen_zellen = floor($tabelle_max
/ $breite_klein);
$zaehler = 0;
echo "<table width=$tabelle_max\"
cellpadding=4 cellspacing=0><tr>";
while ($file = readdir ($handle))
{
if(ereg(".gif", $file) || ereg(".jpg", $file) || ereg(".png",
$file) ) {
$datei = "$dir/$file";
$size = getimagesize($datei);
$breite = $size[0]; $hoehe = $size[1];
if($zaehler >= $tabellen_zellen)
{ echo '</tr><tr>'; $zaehler = 1; } else { $zaehler++; }
echo
'<td><a href="#" onclick="window.open(\'oeffner.php?datei='.$datei.'\',
\'fenstername\', \'scrollbars=0,toolbar=0,location=0,directories=0,
status=0,resizable=0,width='.$breite.',height='.$hoehe.'\');
return false;"><img src="'.$datei.'" width="'.$breite_klein.'"
height="'.$hoehe_klein.'" border=0></a></td>';
}
}
echo '<tr></table>';
?>
Die Bilder sollten jetzt nur noch in einer dem Web gerechten Größe in einem eigenen Ordner liegen. Sie werden automatisch ausgelesen, als kleine Vorschau angezeigt und verlinkt. Die Vorschau besteht in dieser Basisvariante aber nicht aus einer extra Thumbnail-Grafik, sondern aus der vollen Grafik, vom Browser heruntergerechnet. Das lässt sich später bei Bedarf noch ändern. Der Pfad des Ordners muss in Zeile vier der Variable $dir übergeben werden, allerdings ohne abschließenden „/“.
Für die Anzeigegröße sind die Zeilen sechs bis acht zuständig. Hier wird die Größe für die Vorschau angegeben und die maximale Breite der Tabelle. Je breiter die Tabelle, desto mehr Bilder werden nebeneinander angezeigt. Die Anzahl der Tabellenzellen errechnet sich in Zeile neun aus der Breite der Tabelle durch die Breite der Bilder. Mit dem Zusatz floor() werden die Nachkommastellen abgeschnitten.
Schließlich wird für jede Datei des Ordners, wenn sie die Endung .gif, .jpg oder .png hat über den Befehl size = getimagesize($datei) die Breite und Höhe des Bildes ausgelesen. Über $size[0] und $size[1] stehen dann Breite und Höhe als Variablen zur Verfügung. Dies ist für die Tabelle zwar egal, aber wichtig für die Größe des PopUp-Fensters mit der richtigen Version des Bildes.
Die zweite benötigte Datei oeffner.php bestimmt das Aussehen des PopUp-Fensters, welches die Maße des Original-Bildes bekommt. Das Bild wird ohne Rahmen angezeigt, ein Klick darauf schließt das Fenster dann wieder. In dieser Datei muss nur der <Title>-Tag angepasst werden, alles andere kann beibehalten werden.
<HTML><HEAD><TITLE>Vorschau</TITLE></HEAD>
<BODY TOPMARGIN=0 LEFTMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="self.focus()">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH="100%" HEIGHT="100%">
<TR><TD ALIGN=center HEIGHT="100%">
<A HREF="#"
onClick="window.close();return false"><IMG SRC="<?=$datei?>"
BORDER=0 alt=""></A>
</TD></tr></TABLE></BODY></HTML>
Diese Methode hat einen Nach- und einen Vorteil. Da jedes Bild erst einmal in der vollen Größe eingelesen werden muss, dauert die Anzeige der Tabelle bei vielen und großen Bildern recht lange. Auch ist die Qualität des Browser-Resize nicht sehr fein gezeichnet. Die geladenen Bilder befinden sich dann aber alle im Cache des Browsers, per Klick wird die große Anzeige im PopUp dafür blitzschnell geöffnet.
Als Lösung könnte man eine Voransicht für jedes Bild des Ordners generieren. Das erledigt am besten ein Bildprogramm wie Photoshop oder Paint Shop Pro. Die kleinen Vorschaubilder sollten den gleichen Namen tragen wie die Vollversionen, nur mit dem Zusatz „_klein“. Die Bilderliste würde dann so aussehen: bild1.jpg, bild1_klein.jpg, bild2.jpg, bild2_klein.jpg …
Der Einfachheit halber haben alle kleinen Bilder die gleiche Größe, die auch im Quellcode der Datei bilder.php für $hoehe_klein und $breite_klein eingetragen ist (Zeile sechs und sieben). Suchen Sie in dieser Datei nun nach der Zeile
if(ereg(".gif",
$file) || ereg(".jpg", $file) || ereg(".png", $file) ) {
und ersetzen Sie alles bis zum Ende durch diesen Quellcode:
if(ereg("_klein.gif",
$file) || ereg("_klein.jpg", $file) || ereg("_klein.png",
$file) ) {
$thumbnail = "$dir/$file";
$datei = "$dir/".str_replace("_klein","",$file);
$size = getimagesize($datei);
$breite = $size[0]; $hoehe =
$size[1];
if($zaehler >= $tabellen_zellen) { echo '</tr><tr>';
$zaehler = 1; } else { $zaehler++; }
echo '<td><a href="#"
onclick="window.open(\'oeffner.php?datei='.$datei.'\', \'fenstername\', \'scrollbars=0,toolbar=0,location=0,directories=0,
status=0,resizable=0,width='.$breite.',height='.$hoehe.'\');
return false;"><img src="'.$thumbnail.'" width="'.$breite_klein.'"
height="'.$hoehe_klein.'" border=0></a></td>';
}
}
echo '<tr></table>';
?>
Damit werden dann alle kleinen Thumbnail-Bilder angezeigt, das Popup zeigt aber weiterhin die großen Versionen.
