So habe ich es gemacht ...

Eine einfache Möglichkeit der Anwendung von Lightbox - ohne dass man die Dateien selbst auf einem Webspace hosten (und vor allen Dingen, ohne dass man alle Verweise ändern muss) muss - gibt es hier Es muss doch ...
 
Ich wollte die Dateien selbst hosten und bin eigentlich nur den Anweisungen auf der Seite Lightbox2 - How to use gefolgt.
  • Dateien herunterladen unter Download und auf der Festplatte speichern.
  • Dateien per FTP auf eigenen Webspace hochladen.
  • In den Dateien lightbox.js und lightbox.css die Pfade der Verweise auf die Grafiken anpassen (Punkt 3 von Part 1).
  • Die Verweise auf die JavaScript-Dateien und die CSS-Datei anpassen (Punkte 1 und 2 von Part 1) und in den Header meines Blogs einfügen; ich habe die Position unmittelbar vor dem Header-Schlusstag genommen.
  • Hinweis: es funktioniert nur mit vollständiger URL, nicht mit relativen Pfadangaben, weil das Script und die Dateien auf einem externen Server liegen. 
Damit ist Punkt 1 abgeschlossen. Wenn man jetzt möchte, dass ein im Blog hochladenes Bild beim Anklicken in einer Lightbox geöffnet wird, muss man im HTML-Code des Posts einiges modifizieren. Deshalb ist dieses Verfahren weniger für jemand geeignet, der von HTML keine Ahnung hat. Schon an der Anpassung der Dateien (wie oben beschrieben) dürfte derjenige scheitern. Um sich in HTML einzuarbeiten, ist die Seite SELHTML sehr gut geeignet.
Kommen wir zu Punkt 2:
  • Ich habe ein Bild in einem neuen Post hochgeladen. Das Bild habe ich vorher in einem Bildbearbeitungsprogramm in der Größe so angepasst, wie es dann in der Lightbox erscheinen soll, es sollte am besten komplett auf den Bildschirm passen, ohne scrollen zu müssen.
  • Wenn das Bild im Editorfenster zu sehen ist, gehe ich in "HTML bearbeiten"
  • Dort entferne ich im <a>Tag das "-h" hinter dem Wert "s1600" - das wird von Picasa hinzugefügt und damit funktioniert es nicht.
  • Außerdem füge ich das Attribut rel="lightbox" in den <a>Tag und einen title hinzu (Punkt 1 von Part 2)
Fertig ist das Einzelbild.

Außerdem kann ich mit dem gleichen Sccript eine Bilderschau erstellen, die auch in einer Lightbox geöffnet wird. Dazu muss man nur das Attribut mit einem Gruppennamen in eckigen Klammern ergänzen wie in Punkt 2 von Part 2 beschrieben.

Die Schriftfarbe für die Bildunterschrift (title) ändere ich in der Datei lightbox.css im Selektor #imageData, die Hintergrundfarbe für die Overlayseite im Selektor #overlay. Hinweis:  es funktioniert nicht mit dem Farbnamen, man muss den Farbwert angeben!

Keine Kommentare: