Home Navigationspfeil Besondere Features Navigationspfeil Galerie einbinden

Lightbox-Galerie einbinden

Hier zeige ich Ihnen, wie einfach das Einbinden einer Lightbox-Galerie gelingt. Sie benötigen lediglich CMBasic 1.6, PHP 5 und einen Symbolbefehl. Es klappt bei den meisten Hostern.

Alte Vorlage "Lightbox-fähig" machen

Die folgenden Schritte sind nur nötig, wenn Sie auf CMBasic 1.6 updaten bzw. Ihre eigene index.php verwendet haben. Alle, die erst mit CMBasic 1.6 beginnen, schauen gleich zur Überschrift "Galerie einbinden"!

  1. Achten Sie darauf, dass die neue CSS-Datei lichtkasten.css in den Kopf der HTML-Seiten eingebunden wird. Das geschieht allerdings automatisch, wenn die Vorlage entsprechend vorbereitet ist. (Alle mit CMBasic 1.6 ausgelieferten Vorlagen sind es.) Das Enbinden geschieht dort durch den Symbolbefehl {$head}.
  2. Sie wollen Ihre alte Vorlage weiter nutzen? Fügen Sie den Symbolbefehl zum Einbinden nachträglich ein, er sieht so aus: {$head} Notieren Sie ihn direkt über dem ausschaltenden </head>-Tag. Dieser Symbolbefehl bindet die CSS-Datei automatisch ein. Und zwar nur dann, wenn Sie die Galerie benötigen.

Galerie einbinden

  1. Legen Sie dann im Dateisystem unterhalb von galerie einen (fast beliebig benannten) Ordner an und speichern Sie dort Ihre Abbildungen. (Umlaute, Leer- und Sonderzeichen sind allerdings verboten bei der Namensvergabe!) Im Beispiel soll der Ordner fotos heißen und einige Abbildungen der Kleinbahn »Molly« beinhalten.
  2. Gehen Sie an die Stelle, wo Ihre Galerie erscheinen soll und notieren Sie folgenden Symbobefehl: {galerie,fotos}. Schon erscheint die Galerie!

Per Voreinstellung sind die Thumbnail-Grafiken 150x150 Pixel groß.

Individuelle Maße festlegen

Sie können diesem Symbolbefehl noch zwei weitere Parameter mit auf den Weg geben, und zwar die Breite und die Höhe! Schreiben Sie {galerie,fotos,200,160} um die Maße 200x160 Pixel festzulegen. Einfacher geht's nicht, oder?

Grafik mit Titel versehen

Sie wollen, dass in der Lightbox statt des Dateinamens ein Titel angezeigt wird, praktisch eine Bildunterschrift? Fügen Sie den Titel direkt in Ihre JPG-Datei ein.

Unter Windows XP rechtsklicken Sie auf die Abbildung, gehen ins Register Dateiinfo und legen dort den Titel fest. Unter Windows Vista rechtsklicken Sie ebenfalls und wählen Eigenschaften. Den Titel legen Sie hier allerdings im Register Details fest.

Beachten Sie, dass Sie die Grafiken nicht zwischen den Windows-Versionen austauschen sollten. Die eine Version (also XP bzw. Vista) kann den in der anderen Version gesetzten Titel nicht erkennen. Mein Skript jedoch liest beide aus, egal ob unter XP oder Vista gesetzt!

Individuelles Aussehen festlegen

CSS-Profis können auch das Aussehen der »Kästen« steuern, in denen die Abbildungen dargestellt werden. Das gelingt unter css/spezial/lichtkasten.css. Bearbeiten Sie die erste Stilregel namens .lichtkasten

.lichtkasten {
  float: left;
  text-align: center;
  border: 2px solid silver;
  margin: 5px;
  padding: 5px;
}

Ein Wort zu PHP 5

PHP 5 ist bei immer mehr Dienstleistern verfügbar. Bei vielen Hostern genügt eine einfache Anfrage an den Support oder sogar nur ein simpler Befehl in der .htaccess und schon läuft PHP 5 statt PHP 4.

In der von CMBasic mitgelieferten .htaccess stehen einige Regeln für unterschiedliche Hoster, beispielsweise All-inkl.com und PS-Webhosting. Entfernen Sie die Kommentarzeichen # vor der entsprechenden Regel und setzen Sie diese Datei ein!

© CMBasic.de