MySQL-PHP-Tutorial:
Vertikaler
Bilderstreifen mit PHP
Aufgabenstellung:
Auf einer Webseite sollen alle Bilder eines Verzeichnisses untereinander dargestellt werden.
Lösung:
Schritt 1: Bilder erstellen
Die Bilder sollten idealerweise die gleiche Breite aufweisen, damit diese nachher schön in einer Spalte untereinander angeordnet werden können.
Schritt 2: Datei-Upload
Wir erstellen mit einem beliebigem FTP-Programm ein Verzeichnis images/shuffle/ auf dem Webserver und laden alle Bilder in dieses Verzeichnis.
Schritt 3: Ermitteln der Bild-Dateinamen
Unser Skript nutzt die Funktionen opendir(), readdir() und closedir():
//$pfad gibt das Filesystem-Verzeichnis auf dem Webserver an
$pfad = "/var/www/web4/html/images/shuffle/";
//opendir() öffnet das Verzeichnis und legt ein Handle $dir an
$dir = opendir($pfad) or die( "Kann $pfad nicht aufmachen");
//in einer while-Schleife werden alle Dateien und Verzeichnisse eingelesen und in einer Variablen $file angelegt
while ($file = readdir($dir)){
//wenn es sich nicht um ein Verzeichnis handelt...
if (!is_dir($file)) {
//...wird der Dateiname ausgegeben
print "<br>$file\n";
}
}
//zum Schluß wird das Dateihandle noch geschlossen
closedir ($dir);
Schritt 4: Bilder erzeugen
Statt dem Dateinamen wollen wir nun noch eine Bilddatei erzeugen. Dazu muss einfach nur der letzte print-Befehl in HTML umgesetzt werden. Bilddateien werden über das img-Tag eingebunden:
print "<br><img src=\"images/shuffle/" . $file . "\">\n";
Schritt 5: Bildattribute setzen
Um die Attribute zu setzen bedienen wir uns der getimagesize()-Funktion und setzen vor der while-Schleife noch eine Variable $i mit dem Startwert 1, um die Bilder durchzunummerieren:
$pfad = "/var/www/web4/html/images/shuffle";
$dir = opendir($pfad) or die( "Kann $pfad nicht aufmachen");
$i=1;
while ($file = readdir($dir)){
if (!is_dir($file)) {
$imgsize = getimagesize($pfad."/".$file);
$altname = "Bild $i";
//$imgsize[0] liefert die Breite, $imgsize[1] die Höhe
print "<br><img src=\"images/shuffle/" . $file . "\" width=\"$imgsize[0]\" height=\"$imgsize[1]\" alt=\"$altname\">\n";
$i++;
}
}
closedir ($dir);
//©2004 by Gurkcity Webdesign - www.gurkcity.de
//Verwendung des Tutorials nur unter Angabe eines Links/ Querverweises auf www.gurkcity.de erlaubt