Coding-Schatzkästlein
Kleine Tips & Scripts zum Webdesign
Start > Server > Image-Browser

Server: Lion IBrowse - ein PHP-Image-Browser

Zusammenfassung

Name:  Lion IBrowse (Little Online Image Browser)
Aufgabe:  Stellt alle Grafiken eines Web-Serververzeichnisses (ggf. als Thumbnail) dar.
Benötigt:  PHP ab 4.1 (JavaScript ab 1.5 wird empfohlen)
Beispiel:  Die Coding-Grafiken "Oberfläche MultiTOS":
Standard
Dunkelblau
Kompletter URL
60x60-Thumbnails
Original-Größe
Nur Bilder

Download:  ibrowse.src

Praktisch, so ein Image-Browser, der alle Grafiken, die man auf der Festplatte hat, auflisten und übersichtlich (also ggf. verkleinert) darstellen kann. Wer so etwas auch für seine Web-Site gebrauchen kann, der kann dieses kleine PHP-Script verwenden. Es ist dazu gedacht, sich schnell einen Überblick über die Grafiken zu verschaffen, die aktuell im Web-Space liegen. Oder man kann auch unterwegs mit seiner Hilfe schnell Grafiken vom eigenen Server in z.B. in Foren oder Gästebücher eintragen, die das Einbinden von Fremd-Grafiken erlauben. Einfach ein Dreifachklick auf die Zeile des gewünschten Quellcodes, um diese zu markieren, und man kann ihn mit Copy & Paste übernehmen.

Der Image-Browser läßt sich mit mehreren URL-Parametern steuern:

  1. ibrowse.php (ohne Parameter): Es werden die Grafiken des Verzeichnisses aufgelistet, in dem sich IBrowse befindet.
  2. Pfad-Parameter path - hier: ibrowse.php?path=%2Fskins%2Ftos4%2Fimg
    Es werden die Grafiken des angegebenen Verzeichnisses aufgelistet (hier wurden die Verzeichnistrenner "/" korrekterweise kodiert zu "%2F" - praktisch akzeptieren Browser üblicherweise aber auch die unkodierte Schreibweise, hier also: ibrowse.php?path=/skins/tos4/img).
  3. Farb-Parameter color - hier mit dem Farbwert #000066 (color=%23000066)
    Diese Farbe wird zusätzlich zu den im Quellcode vordefinierten Farben als mögliche Hintergrundfarbe angeboten (Farbauswahlleiste ganz links). Die Raute für hexadezimale RGB-Farbwerte muß hier kodiert werden, da sie in URLs bereits anderweitig Verwendung findet (als Fragment-Bezeichner). Alternativ läßt sich der Farbwert aber natürlich auch als dezimaler RGB-Wert oder als Farbname übergeben. Für Blau wäre also gültig: color=%230000FF, color=%2300F, color=rgb(0,0,255) sowie color=blue
  4. Source-Parameter src - hier mit dem Wert uri (src=uri).
    Regelt, welche Pfadangabe im HTML-Quellcode zum Bild angezeigt wird. Der Source-Parameter kann folgende Werte annehmen:
    • none: Es werden nur die Bilder selbst angezeigt, kein Quellcode. Dateinamen, Bild- & Dateigröße sind nur als Bild-Tooltip zu sehen.
    • file: Es wird nur der Dateiname angezeigt (nur möglich, wenn es sich beim Bildverzeichnis um das IBrowse-Verzeichnis selbst handelt!).
    • path: Es werden Pfad + Dateiname angezeigt.
    • uri: Es wird der vollständige URI angezeigt.
    Im Quellcode für Foren/Boards steht immer der vollständige URL!
  5. Größen-Parameter width + height - hier 60x60 (width=60&height=60). Gibt die Breite und Höhe vor, in der die Grafiken maximal dargestellt werden sollen. Größere Grafiken werden verkleinert. Bei einem Wert von 0 wird die Grafikgröße nicht begrenzt (Original-Bildanzeige). Voreingestellt sind eine Breite von 250 und eine Höhe von 80 Pixeln.

Wenn der Browser eine aktuelle JavaScript-Version unterstützt, erscheint im Tabellenkopf noch eine Leiste mit den 256 Graustufen, den vordefinierten sowie ggf. der übergebenen Farbe. Hier kann man dann per Mausklick die Hintergrundfarbe der Grafiken ändern, um zu sehen, mit welchen Hintergrundfarben z.B. transparente GIFs oder PNGs harmonieren. Verwendung findet hier eine abgespeckte Version der Funktion cssRule() ...


Updates:
08.09.2007: 
Korrektur: "Farbwahl-JavaScript" (verkürztes cssRule()) aktualisiert.
17.06.2006: 
Korrektur: Workaround für Safari-Browser im "Farbwahl-JavaScript" eingebaut.
10.06.2006: 
Korrektur & Erweiterung. Korrigiert wurde ein Bug bei der Pfadverarbeitung, der sich insbes. unter Windows-Servern bemerkbar machte. Ergänzt wurde der src-Parameter none, sowie kleinere Verbesserungen.


Kurz-URL dieses Artikels: http://Coding.binon.net/IBrowse