Lightbox in Atahualpa integrieren

von Silvia Rothen, rothen ecotronics, am 24.4.2011

Den halben Ostersonntag habe ich nun verbraten, um eine schöne Bildanzeige mit Vorschaubild und grösserer Version in WordPress einzubinden, so wie man es in den Bildergalerien im Web überall sieht. Den ersten Versuch startete ich mit dem Plugin A Gallery. Das Ergebnis war, dass gleich alle meine Seite zuoberst eine hässliche Fehlermeldung schmiessen. Nun habe ich es endlich geschafft, allerdings nicht mit einem Plugin, sondern zu Fuss, d.h. mit manueller Einbindung von JQuery Lightbox. Ein Stolperstein dabei war, dass Lightbox in das Theme Atahualpa integriert werden sollte.

Vorgehen

Die gewünschten Bilder lokal vorbereiten, d.h. je eine kleine und eine grosse Version im Format jpg oder png erstellen
Die grössere Bildversion für alle Bilder via Mediathek hochladen und sich dabei die Bildnummer merken
JQuery Lightbox herunterladen und auf der lokalen Festplatte entzippen
https://github.com/balupton/jquery-lightbox/downloads
Bei mir war das die Dateiv1.4.9-final.zip
Den gesamten entpackten Ordner – bei mir heisst er jquerylightbox – mit FTP auf den Webserver hochladen und zwar als Unterverzeichnis von /httpdocs/wordpress/wp-includes/js/
In den Optionen von Atahualpa die folgende Einstellung suchen: Atahualpa Theme Options – Various Content Items: Add HTML/CSS Inserts – HTML Inserts: Header
Den folgenden Code in das Eingabefeld eingeben (natürlich mit der eigenen URL)
<script type=“text/javascript“
src=“http://www.meinsite.ch/wordpress/wp-includes/js/jquerylightbox/scripts/jquery.lightbox.js“>
</script>
Im Artikel an die Stelle gehen, wo das Bild eingefügt werden soll. Zuoberst in der Werkzeugliste auf Einfügen Bild klicken. Auf der lokalen Festplatte die kleine Bildversion suchen und einfügen. Lassen Sie das Bild in der Originalgrösse. Im Url setzen Sie bereits die Nummer der zugehörigen grossen Bildversion ein.
Gehen Sie in die HTML-Ansicht des Artikels, suchen Sie den soeben eingefügten Link und ergänzen Sie das A-Tag mit folgendem lightbox-spezifischen Code
<a rel=“lightbox“ title=“Mein titel“ href=…