Sorry - das Script funktioniert derzeit nicht, da ich gerade den Provider wechsele.

Willkommen im Lightbox-Blog

Seit einiger Zeit schon hatte ich ein Template für Blogger gesucht, das das Lightbox-Script (oder eine Abwandlung davon) integriert hat. Leider habe ich keins gefunden - also "selbst ist die Frau".

Auf der Suche nach einem Script, das ich selbst einbinden kann, bin ich dann bei Lokesh Dhakar fündig geworden. Er hat dieses Script geschrieben und man kann es lizenzfrei verwenden (Creative Commons Attribution 2.5 License). Inzwischen gibt es einige Abwandlungen dieses Scripts, mit welchen man dann sogar Text oder Videos in der Lightbox anzeigen kann. Eine Auflistung gibt es hier.

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 ...

Blog erstellt im Dezember 2009

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!

Lightbox aus der Sidebar

Ich kann Lightbox nicht nur in Posts verwenden mit Thumbnails, sondern kann den Lightbox-Link auch auf einen Text legen, diesen auch aus der Sidebar aufrufen lassen. Ist gar nicht so schwer.

Ich erstelle zuerst einen neuen Post, in dem ich das Bild hochlade, das in der Lightbox angezeigt werden soll (auf richtige Größe des Originalbildes achten!). Diesen Post veröffentliche ich jedoch nicht, sondern speichere ihn nur als Entwurf. Ich habe damit aber erreicht, dass das Bild in meinem Picasa-Webalbum für Blogger gespeichert ist und mit einem Link abgerufen werden kann.

Jetzt gehe ich im Post-Editor in den Modus "HTML bearbeiten" und kopiere den HTML-Code.

Dann öffne ich Layout > Seitenelemente und füge in der Sidebar das Gadget "HTML/JavaScript" hinzu. Im Code-Fenster füge ich den HTML-Code ein, der so aussieht:

<div class="separator" style="clear: both; text-align: center;"><br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6wUKWyiGTEb-q2onGMQUVEcairrRKg4CcfTdwH33eXdhykk7-iuv78hh_wrM413td0HbXfcZRf0UbgBk0gzwqTrBSRfF8X6wf7qKnWbqKjsC8psZmM8qdvH8NfDXNpgjLorY3mdId6U/s1600-h/sunny_rosen.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6wUKWyiGTEb-q2onGMQUVEcairrRKg4CcfTdwH33eXdhykk7-iuv78hh_wrM413td0HbXfcZRf0UbgBk0gzwqTrBSRfF8X6wf7qKnWbqKjsC8psZmM8qdvH8NfDXNpgjLorY3mdId6U/s320/sunny_rosen.jpg" /></a></div> 

Jetzt muss der Code noch bearbeitet werden.
Zuerst lösche ich hinter s1600 das -h.

Dann füge ich vor imageanchor="1" ein: 

rel="lightbox" title="Ertappt ..."

Dabei ist der title optional, das ist der Text, der in der Lightbox unter dem Bild angezeigt wird.

Wenn ich kein Bild zum Anklicken haben will, sondern einen Textlink, entferne ich den kompletten img-Tag, nämlich alles das hier:

<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiK6wUKWyiGTEb-q2onGMQUVEcairrRKg4CcfTdwH33eXdhykk7-iuv78hh_wrM413td0HbXfcZRf0UbgBk0gzwqTrBSRfF8X6wf7qKnWbqKjsC8psZmM8qdvH8NfDXNpgjLorY3mdId6U/s320/sunny_rosen.jpg" />

Stattdessen schreibe ich an diese Stelle den Text, der dann in der Sidebar als Link auf das Bild erscheinen soll, also z.B. "Bitte hier klicken ..."

Zum Schuss sieht mein HTML-Code so aus:

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi27vEUEOPVxImCNest7t0JdULGT9_1aE2SFPg7q6TZxBg9pczkrWrinECQRz2XJnGlVAnk2irlCAhOHTiLJWYUzPdZFDtgbzDJRC7OqKJ8gibQBeCAV8K76rzj0wrjrbU15p96JfGoWBc/s1600/sunny_rosen.jpg" rel="lightbox" title="Ertappt ..." imageanchor="1" style="margin-left: 1em; margin-right: 1em;">Bitte hier klicken ...</a></div>

Das ist eigentlich alles, also wirklich gar nicht so schwer.
Und wenn ich diesen Textlink nicht in der Sidebar, sondern in einem Post verwenden will, kopiere ich den Code einfach im Post-Editor (Modus "HTML bearbeiten") an die Stelle des Textes, wo er stehen soll:

Bitte hier klicken ...

Einzelbild in der Lightbox

Wenn du auf das Bild klickst, öffnet es sich in einer Lightbox und legt sich über die vorhandene Seite.

Das Script und die erforderlichen Grafiken habe ich auf eigenem Webspace hochgeladen (Beschreibung) und verweise im HTML Headbereich des Blogs darauf. Im Blog selbst kann man das Script nicht hochladen.

Das Script stammt von Lokesh Dhakar

Wichtig ist es, bei Bildern, die in Blogger hochgeladen wurden (und damit in einem Picasa Webalbum gespeichert sind), das -h im <a>Tag hinter dem s1600 (manchmal ist es auch ein kleinerer Wert) zu entfernen. Wenn das Bild eine schlechtere Qualität bekommt, setzt man den Wert s1600 auf s800.

Eine Bilderschau in der Lightbox

Mit dem gleichen Script kann ich eine Bilderschau in der Lightbox erstellen. Einfach auf das erste Bild klicken, dann kann man im Bild rechts oben weiterklicken und links oben zurückklicken.

Zu empfehlen ist das aber nur für jemand, der ein bißchen Ahnung von HTML hat, es muss nämlich im HTML-Code einiges angepasst werden. Ebenfalls müssen die Scripte angepasst werden mit den URLs der gespeicherten Grafiken, die in den Scripten verwendet werden.