Bildergalerie im neuen Design II

Samstag, 28. Dezember 2006 by shck

Mit dem Re-Design von shck.de wurde auch die Bildergalerie überarbeitet, um sie tabellenfrei, framefrei, javascript-frei und xhtml strict valide zu gestalten.

Die Programmierung war im ersten Schritt etwas umfangreicher, dadurch wurde aber die Erstellung der Galerien und im Allgemeinen die Verwendung von Bildern immens vereinfacht.

Wasserzeichen

Sofern nicht einzelne Bilder oder Verzeichnisse davon ausgeschlossen sind, erhält jetzt jedes JPG-Bild (auch außerhalb der Galerie) ein Wasserzeichen aufgedrückt.

Realisiert wurde das mit ModRewrite + RewriteCond und der Umleitung über eine PHP-Script, welches das Bild neu mit Wasserzeichen erstellt und anzeigt.

Da das Wasserzeichen erst beim Aufruf erstellt wird, kann es theoretisch ohne Aufwand für alle Bilder der kompletten shck-Seite gleichzeitig geändert werden.

Ein weiterer Vorteil des nachträglich eingezeichneten Wassererzeichens ist, dass vom Original-Bild - automatisch per PHP - ein kleines Vorschaubild (Thumbnail) ohne Wasserzeichen erstellt werden kann. Die Bild-Einbindung erfolgt nur mit einem Anhang (bild.jpg?tb=1). Damit erspart man sich die manuelle Erstellung der Vorschaubilder!

Die Galerie

Damit die Vorschaubilder horizontal (aus nostalgischen Gründen, wegen meinem alten Design) gescrollt werden können, wird die Breite und der Abstand der Bilder ermittelt, um die Breite des scrollbaren Bereiches festzulegen, damit kein Umbruch der Bilder erfolgt und alte Browser die Seite auch korrekt anzeigen.

Jedes Bild kann vom jeweiligen Vorschaubild per Klick angesprungen werden. Die "großen" Bilder sind auch durchscrollbar! Klickt man auf ein Bild, gelangt man zum nächsten.

Zentrale Funktion

Die komplette Galerie (inkl. der Vorschaubilder) wird durch eine zentrale Funktion erstellt, um ein einheitliches Design (Corporate Design) zu gewährleisten.

Je Galerie wird nur ein Array mit den Bildern + Titel ("Bild.jpg|Titel") benötigt, den Rest erledigt die Funktion!

Power UP - Cache Control

Sofern nicht bestimmte Dateien/Verzeichnisse davon ausgeschlossen sind, wird - Dank dem Apache-Server - mit dem Expires HTTP Header die Cache-Eigenschaft / das Verfalldatum (der Bilder) festgelegt. Dadurch ergibt sich eine verkürzte Ladezeit der Seite und eine Einsparung der Bandbreite, da die angeforderten Dateien vom Cache - statt vom Server - geholt werden.

Bildergalerie im neuen Design I

Samstag, 21. Juni 2003 by shck

In einem komplizierten Tabellenaufbau werden Vorschaubilder nebeneinander gelegt und mit Eckpunkten versehen.

Klickt man auf ein Vorschaubild so wird das gewählte Bild in Originalgröße mit meinem Image-Popup-Script in einer dynamisch erzeugten HTML-Popup-Seite auf dem Bildschirm zentriert.

Zusätzlich wird das ausgewählte Bild als Hintergrundbild verwendet:

function shckfbgp(shckbgp) {
  document.getElementsByTagName("body")[0].style.backgroundImage="url('"+shckbgp+"')";
}

Damit die Galerieseite immer die korrekte Größe hat und eine horizontale Scrollweise möglich ist, wird die Seite automatisch nachträglich in Frames geladen/gesetzt:

function shckfpicmn() {
  if(!parent.frames['shckpicmn']) {
    var shckfn = location.pathname.substring(location.pathname.lastIndexOf('/')+1);

    document.writeln('<html>\n<head>\n<title>www.shck.de<\/title>\n<\/head>\n\');
    document.writeln('<frameset rows="52,*" framespacing="0" frameborder="0" border="0">');
    document.writeln('<frame name="shckpicmn" noresize scrolling="no" marginwidth="0" marginheight="0" target="shckmcont" src="../pics_menu.html">');
    document.writeln('<frameset rows="444,*">');
    document.writeln('<frameset cols="*,632,*">');
    document.writeln('<frame name="shckrml" noresize scrolling="no" marginwidth="0" marginheight="0" src="../../../leer.html">');
    document.writeln('<frame name="shckpcont" noresize scrolling="auto" marginwidth="0" marginheight="0" src="'+shckfn+'?999">');
    document.writeln('<frame name="shckrmr" noresize scrolling="no" marginwidth="0" marginheight="0" src="../../../leer.html">');
    document.writeln('<\/frameset>');
    document.writeln('<frame name="shckru" noresize scrolling="no" marginwidth="0" marginheight="0" src="../../../leer.html">');
    document.writeln('<\/frameset>');

    document.writeln('<\/frameset>');
    document.writeln('<\/html>');
  }
}

Nachfolgend noch ein paar Screenshots der Bildergalerie: