Ultragallery

19. April 2013
von und

In einer Zeit, in der Bildschirme in allen denkbaren Formaten und Auflösungen existieren, ist es nicht einfach, eine Webseite zu bauen, die allen Ansprüchen gerecht wird. Die Ultragallery setzt mit ihrer Einfachheit neue Massstäbe und bietet jedem Entwickler eine solide Lösung, Bilder als Webgalerie für verschiedene Browser optimiert darzustellen. Damit auch Benutzer ohne Programmierkenntnisse die Galerie verwenden könnnen, wurde die Bedienung so einfach wie möglich gestaltet.

 

Live-Preview
Hier gehts zu einer Demo-Version der Ultragallery V1

Workflow und Anforderungen
Die Installation der Ultragallery V1 ist denkbar einfach. Nachfolgend die Anforderungen und die Installationsanweisungen in wenigen Schritten.

Anforderungen:

  • Webserver mit PHP-Unterstützung
  • HTML5-fähiger Browser
  • HTML-Editor (wir empfehlen den Dreamweaver von Adobe, ein Texteditor reicht aber auch aus)

Installation:

  1. ZIP-Datei herunterladen (Link unten) und entpacken
  2. Die Datei “index.php” und den Ordner “_bilder” in einen Ordner auf dem Webserver laden
  3. Eigene Bilder in den Ordner “_bilder” laden (Wichtig: alle im selben Format, Standard: JPG)
  4. Datei “index.php” in einem HTML-Editor öffnen
  5. Einstellungen unter “GALLERY SETTINGS” ganz am Anfang der PHP-Datei anpassen (siehe “Einstellungen”)
  6. Galerie im Browser des Vertrauens aufrufen und Freunden davon erzählen

Funktionen
Die Ultragallery basiert auf HTML, PHP, CSS und Javascript. Die Bilder werden aus dem Ordner “_bilder” automatisch ausgelesen und in der passenden Grösse (Format 16:9) je nach Bildschirmauflösung im Browserfenster angezeigt. Die Bilder befinden sich in einem DIV-Container, der unabhängig von der Bildgrösse definiert ist. So können auch Bilder, die nicht im Format 16:9 sind, problemlos angezeigt werden. Die Bildtitel, die über CSS-Styles als Hover-Effekt auf den Bildern erscheinen, entstehen aus dem Bildnamen. Pro Bild sollte ein Underline “_” vergeben werden – dieser bewirkt, dass es im angezeigten Titel einen Zeilenumbruch (<br>) einfügt und die Schrift von Fett (<b>) auf normal (</b>) setzt. Nach dem Titel können beliebig viele Wörter mit Bindestrichen getrennt eingetragen werden, die Bindestriche werden immer in ein Leerzeichen (%20) umgewandelt. Hinweis: das Verwenden von Umlauten (ä,ö,ü) sowie Sonderzeichen (%, |, #, usw.) sollte in den Bildtiteln vermieden werden.

Einstellungen
Im obersten Bereich der Datei “index.php” können verschiedene Einstellungen vorgenommen werden, um die Galerie für den persönlichen Gebrauch optimal anzupassen:

Einstellung Standardwert Beschreibung
opacity 0.6 Definiert die Transparenz der Bilder, wenn der Mauszeiger ausserhalb des Bildes ist
(1 = keine Transparenz, Bild wird voll angezeigt)
font_size 1.2em Setzt die Schriftgrösse für die Bildbeschreibungen
(1.2em = 19,2 Pixel)
backgroundcolor #222 Die Hintergrundfarbe der gesamten Gallery wird definiert
(#222 = relativ dunkles Grau)
imagetype .jpg Gibt an, was für Bilder geladen werden. Wenn die Bilder im Ordner _bilder alle das Format PNG haben, muss hier “.png” angegeben werden. Hinweis: alles Bilder müssen dasselbe Format aufweisen!
wrapped TRUE Entscheidet darüber, ob die Gallery die ganze Browserbreite einnimmt, oder ob sie “wrapped” angezeigt wird (Einzug auf den Seiten)
wrapped_padding_left 10% Setzt den Einzug vom Browserfenster zur Gallery links
wrapped_padding_right 10% Setzt den Einzug vom Browserfenster zur Gallery rechts
wrapped_padding_top 10% Setzt den Einzug vom Browserfenster zur Gallery oben
wrapped_padding_bottom 10% Setzt den Einzug vom Browserfenster zur Gallery unten
gallery_title TRUE Definiert den Titel der Gallery der ganz oben angezeigt wird
gallery_title_text Ultragallery TRUE = Titel anzeigen, FALSE = keinen Titel anzeigen
gallery_title_color #ccc Schriftfarbe des Titels angeben (HEX-Code)

Download
Das gesamte Ultragallery-Paket kann unter folgendem Dropbox-Link heruntergeladen werden:

download_now_2

Grösse: 15.4 MB
Inhalt: index.php, _bilder (Beispielbilder), read_me.pdf (Gebrauchsanleitung)

Kompatibilität
Die Ultragallery wurde für die Browser Safari und Chrome optimiert. Im Firefox läuft die Galerie noch etwas stockend, für weitere Browser (Opera, Internet Explorer) müssen in einer nächsten Version  weitere Optimierungen vorgenommen werden.

Open Source
Wir werden noch weiter an der Ultragallery arbeiten und sie laufend verbessern. Gerne nehmen wir Meinungen und Verbesserungsvorschläge an – natürlich darf die Gallery auch weiterentwickelt werden. Abschliessend eine Auflistung von Funktionen, die als nächstes umgesetzt werden könnten:

  • Bilder in verschiedenen Kategorien auflisten (ein _bilder Ordner pro Kategorie)
  • automatische Thumbnail-Erstellung mit GD-Library für mehr Performance
  • XML- oder SQL-Anbindung für mehr Funktionalität (Texte zu Bildern, Metadaten usw. speichern)
  • Bildupload-Skript und Einsortierung in Kategorien mittels Drag and Drop (Javascript / HTML 5)