Nach meinem Post über Lightbox, möchte ich gerne zeigen, wie man Lightbox in seinem Blogger.com Blog einbaut. Dazu muss man wieder einmal in die Layout Ansicht und dort in den Template Editor unter "HTML bearbeiten". Vor dem </head> Tag sollte man dann folgenden Code einbauen (vorher eine Sicherungskopie ziehen!!!):
<!-- Lightbox Code -->
<link href='http://www.esmussdoch.de/lightbox/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://www.esmussdoch.de/lightbox/lightbox.js' type='text/javascript'/>
<!-- /Lightbox Code -->
Im Template Editor sollte das dann so aussehen:
Danach bitte das Template speichern.
Beim Verfassen eines Beitrags muss man dann in die HTML Ansicht des Post Editors wechseln. Hier kann man dann die Lightbox-Funktionalität im HTML ergänzen.
Man fügt direkt hinter dem
<a ein rel="lightbox" ein. Wenn man eine Bildunterschrift benötigt, trägt man dahinter noch title="Bildtitel" ein.Jetzt kommt noch das Spezialverhalten mit den Picasa Links. Im verlinkten Bild findet man im der URL gerne .../1600-h/... Hier sollte man das -h entfernen, dass ein .../1600/... stehen bleibt. Die Bildlinks funktionieren trotzdem und Lightbox funktioniert so dann auch.
Das war es im großen Ganzen. Ich hoffe der Post ist verständlich und Lighbox hilft Euch in Eurem Blog weiter.
Hallo Thomas!
AntwortenLöschenHab "Lightbox" in unseren Vereinsblog eingebaut. Funktioniert wunderbar. Vielen Dank! Schau mich noch ein bisschen bei dir um. Hast tolle Sachen für blogger.com-User.
Gruß aus Südtirol
Klaus
War echt sehr hilfreich. Danach habe ich sooo lange gesucht.
AntwortenLöschenVielen vielen Dank.
Rene aus Vorarlberg
Hallo, irgendwas mache ich falsch... eingebaut wie beschrieben, meine Bilder liegen im speziellen "Blogger" Album von PicasaWeb, aber das Bild erscheint nicht. Das Script scheint zu funktionieren, das Browserfenster wird abgedunkelt und es erscheint das kleine animierte "Icon", nur kein Bild...
AntwortenLöschen@Alexander
AntwortenLöschenKannst Du mir ein Beispiel zeigen, ich hatte auf Deinem Everblog geschaut, aber aktuell ist das Skript offenbar nicht eingebunden. Melde Dich einfach mit einem Beispiel in einem älteren Post, dann versuche ich Dir zu helfen.
Viele Grüße Thomas
hi, ich bin auch deiner anleitung gefolgt.
AntwortenLöschennun hatte ich dasselbe problem wie alexander.
das script funktionierte, es erschien bloss kein bild.
dann alles retour und nochmal eingebaut und nun kommt nichtmal das icon wieder stattdessen :
"Not Found
The requested URL /_xDYTjLIlOOI/SN-5V9LbFII/AAAAAAAAA4Q/oRXk5fTsUDM/1600/2+21.8+pcby+tmoIMG_1532.jpg was not found on this server."
wenn ich das s bei /s1600/ stehenlasse funktionierts standardmässig.
hier der link dazu http://cappuspicsblog.blogspot.com/2008/07/28808-meldorf.html
Hallo Cappucino, ich habs mir bei Dir angesehen. Es funktioniert doch. Oder hab ich da jetzt etwas falsch verstanden?
AntwortenLöschenHallo Thomas, zuerst eine Kleinigkeit: in Deinem Artikel ist ein Tippfehler, Du hast dort rel="lighbox" stehen und das habe ich natürlich per copy & paste gleich mitgenommen. Muss wohl rel="lightbox" (mit T) heissen, oder? :-)
AntwortenLöschenHier ein älterer Post zum Testen:
http://blog.alex-kunz.de/2008/09/big-sky.html
Nachtrag: wenn ich die Grösse auf s800 ändere gehts... kann es evtl. damit zusammenhängen, dass das Bild gar nicht in 1600px zur Verfügung steht? Wobei es ja ohne Lightbox funktioniert... im Beispiellink von eben funktioniert es jetzt mit s800. Vielleicht schreibst Du eine E-Mail wenn Du weitere Tests machen möchtest, steht im meinem Blogger-Profil. :-)
AntwortenLöschenHallo Alexander, vielen lieben Dank :-) Das mit der Bildgröße ist gut möglich. Das automatische Einfügen über Blogger fügt vermutlich das größtmögliche Format ein. Wofür auch immer das -h angehängt wird, ich hab per Zufall herausgefunden, dass Lightbox dann funktioniert, wenn man das -h herausnimmt, weil ich es aus Picasa bis dato nicht kannte. Dort stehen generell nur die Werte in der URL.
AntwortenLöschenVielleicht ist das noch irgendwie hilfreich (keine Ahnung, kein Plan):
AntwortenLöschenhttp://code.google.com/apis/picasaweb/reference.html#Parameters
Hi Thomas, vielen Dank für diesen praktischen Tipp :) Funktioniert einwandfrei!
AntwortenLöschenHallo. Vielleicht noch als ergänzenden Tipp:
AntwortenLöschen/s-1024/ liefert das Bild in einer für die meisten Bildschirme besseren Auflösung!
André Lademann
Hallo Thomas,
AntwortenLöschenauf der Suche nach How to...bin ich über Dein Tutorial gestolpert. Es funktioniert super! Danke für den tollen Tipp!
Doris
Hallo Thomas,
AntwortenLöschenwie bekomme ich die animierte Variante in?
z. B. hier: http://www.huddletogether.com/projects/lightbox2/
ich habe deinen Code eingebaut, die Bilder poppen zwar auf, aber ebend nicht animiert!?
Hast Du einen Tip?
LG Kurt
Hi Kurt, die animierte Variante biete ich nicht an. Meine Erfahrung damit war die, dass sich die Ladezeit meines Blogs so derartig verschlechtert hatte, dass es meinen Lesern nicht zuzumuten war. Ich verwende aktuell Lightbox1 und nicht die animierte Variante.
AntwortenLöschenDu könntest ausprobieren Lightbox2 von huddletogether.com aus einzubauen. Das heißt Dein Blog müsste auf die relevanten Quellen bei huddletogether.com verweisen. Also mit absoluten Angaben für prototype.js, scriptaculous.js, lightbox.js und lightbox.css, gemäß der Einbauanleitung unter: http://www.huddletogether.com/projects/lightbox2/#how
Ich hoffe das hilft Dir weiter?
Lieber Thomas,
AntwortenLöschenherzlichen Dank für deine Anleitung. Sie war und ist mir eine große Hilfe.
Leider habe ich ein Problem: wenn ich einen Titel für das Bild eingebe wird es in selben Fenster geöffnet. Lösche ich den Titel wieder, dann klappt es auch mit der Lightbox. Ich finde den Fehler nicht.
Vielen Dank vorab für jede Hilfe
@salzdahlum-basketball Wenn Du mir die URL zu Deinem Blog hinterlässt, werfe ich gerne einen Blick auf Deinen Quellcode.
AntwortenLöschenvielen dank, hab ewig eine simple anleitung gesucht, die auch funktioiert!
AntwortenLöschenhey hey.... ich habe genau das gleiche problem wie alexander vor zwei jahren :) die sage scheint an sich zu funktionieren leider kommt kein bild sondern das kleine symbol dreht und dreht sich einfach. ich lass dir mal den link hier, vlt magst dir mal anschauen.
AntwortenLöschenGrüße Eva!
aha... grade schickt er mich beim draufklicken wieder direkt zu picasa. na seh einfach mal wies ist wenn du dort bist
AntwortenLöschenhttp://evalocke.blogspot.com/
Hallo Eva, momentan ist keines Deiner Bilder verlinkt. Vielleicht lässt Du eins exemplarisch verlinkt, dann kann ich mir den Quellcode dazu anschauen. Viele Grüße Thomas.
AntwortenLöschenHallo Thomas,
AntwortenLöschendie Seite ist der Knaller, wirklich top, deine ganzen Anleitungen. Sehr verständlich geschrieben, damit auch Noobs wie ich das Ganze verstehen. All deine Tips und Tricks liefern einem großen Mehrwert für den Blogger.com Blog. Hierfür ein Danke und ein Weiter so!
Der Bildtitel in der Lightbox wird bei mir in sehr hellem Grau angezeigt, nicht so gut lesbar. Ich nehme an, dass es die gleiche Schriftfarbe ist wie in meinem Post (helles Grau auf schwarzem Hintergrund). Ist die Schriftfarbe in der Lightbox beeinflussbar? Nicht vergessen, ich bin ein Noob! ;-) Die Lightbox ist in meinem neuesten Post im Einsatz, falls du dir das mal ansehen magst.
Und noch eine zweite Frage: in deinem Code-Screenshot oben steht neben [rel="lightbox" title="Bildtitel"] auch noch [onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"]. Was bewirkt dies? Hab das bei mir testweise auch mal mit eingebaut, aber kann die Wirkung nicht erkennen.
Grüße Dirk
Hallo Dirk, danke fürs Lob.
AntwortenLöschenDu kannst auf die Anzeige Einfluss nehmen, wenn Du den Style für die Titel überschreibst. Wenn Du z.B. folgendes nach dem eingebundenen Style für Lightbox <link ... lightbox.css"> ins Template schreibst:
<style type="text/css"><!--
#lightboxCaption { color:red; }
--></style>
So wird die Schrift des Titels rot.
Das onblur=".... kannst Du weglassen. Das sind JavaScripte, die Blogger selbst einfügt.
Perfekt - genau das, wonach ich gesucht hatte. Klappt ohne Probleme.
AntwortenLöschenHallo,
AntwortenLöschenohjehmineh - ich wollte das auch gerne einbauen - leider funktioniert es nicht. Ich mache wohl irgendwas falsch. Bin auch erst seit kurzem Blogger.......
Kannst du eventuell mal kucken?
HIer sollte es eigentlich funktionieren - tats aber nicht: http://gedankenkrimskrams.blogspot.com/2009/12/strahlende-gesichter.html
Ich muss doch das >> rel="lightbox" << überall bei den Bildern nachträglich einbauen oder?
Gruß, Flocke
Hallo Flocke! Bau doch den Code für die Lightbox Dateien weiter unten, unmittelbar vor dem </head> ein. Nicht dort, wo es jetzt ist. Da kann es aktuell nicht ausgeführt werden.
AntwortenLöschenWenn Du das geändert hast geh zurück auf die Seite und drücke einmal kräftig shift + F5. Dann sollte Dein Lightbox Code per Klick funktionieren.
Hallo Thomas,
AntwortenLöschenmeinen allerherzlichsten Dank - jetzt funktioniert es. Und nachdem ich noch das von s1600 auf s800 gesetzt habe, sind die Bilder auch nimmer größer als der Bildschirm.
Echt klasse.
Großes Kompliment auch für die prompte Antwort.
Eine (vielleicht bisschen dusselige) Frage hätte ich noch: Falls ich mal das Template ändere muss ich dann den Lightbox-Code wieder einbauen oder wird der übernommen?
Viele liebe Grüße, Flocke
Eine kleine Anmerkung:
AntwortenLöschenöffnet man die Seite mit Safari und klickt auf das Bild, wir es untergeladen.
Durch rum probieren habe ich festgestellt, dass man die Reihenfolge der zwei Code-Zeilen "link..." und "skript..." vertauschen muss.
So funktioniert es auch mit Safari einwandfrei. Danke
Das ist toll, danke.
AntwortenLöschenHallo Thomas,
AntwortenLöschenersteinmal super für die Hilfestellung hier...
toll das du das machst.
Und wie ich sehe bist du auch aus Orschel-wie lustig :-)
Nun zu meinem Prob.
Ich habe den Code kopiert und ihn so in mein Seitenlayout eingefügt.
Doch leider geht da gar nichts.Vielleicht ist dies deshalb so, weil es verändert wurde und kein Standardlayout mehr ist.
Wenn du Zeit hast, würde ich mich freuen, wenn du da mal drüber guckst.
liebe Grüße
Claudi
Hallo Claudi,
AntwortenLöschenversuche den Lightbox-Block möglichst ans Ende des head Bereichs zu stellen. Also ganz nach unten unmittelbar vor das </head>. Und dann fehlt natürlich noch bei den Bildern im Anchorlink, dass lightbox verwendet werden soll.
<a rel="lightbox" ...
ich habe dir eine email geschickt, da das mit dem php code im kommentarfeld nicht ging...
AntwortenLöschenlg
claudi
Hallo Thomas...
AntwortenLöschenAuch ich habe es mir eingebaut und es klappt super....noch habe ich es in einem Testblog von mir. Eine Frage hätte ich jetzt aber noch....wie bekomme ich es denn hin das die Light Box mehere Bilder zeigt. Weißt du was ich meine.....das dann immer oben rechts steht next und ich draufklicken kann und das zum Beispiel 5 Bilder gezeigt werden.
Vielen Dank
Gruss Andrea
Hi Andrea,
AntwortenLöschenalles was man zu Lightbox 1 wissen muss findest du hier http://www.huddletogether.com/projects/lightbox/
Scheinbar gibts das Feature mit der Bildergalerie erst in Lighbox 2. Schade eigentlich.
suuuper sache! vielen dank!!
AntwortenLöschenVielen vielen Dank für den Script.
AntwortenLöschenbip up & seen! nice work!
AntwortenLöschenGrossartig, dank aus Holland
AntwortenLöschensuper! isch eifach toll
AntwortenLöschenHallo Thomas,
AntwortenLöschenerst mal danke für das Skript. :)
auch ich habe versucht es (vorerst) in ein Testblog einzufügen, aber leider klappt es nicht.
Hier der Link:
http://photoliana.blogspot.com/2010/07/test-123.html
Oben habe ich direkt ein Foto bei blogspot hochgeladen und das öffnet dann auch in einer Lightbox, aber ein ganzes Album (bei Picasa) kann ich nicht verlinken. Mache ich etwas falsch oder ist das Skript dafür nicht vorgesehen?
Gibt es irgendwie eine Möglichkeit einmal die Lightbox zu öffnen und dann mit "next" die weiteren Bilder anzusehen? ;)
Wenn nicht, wie schwer wäre es das Skript selbst zu verändern?
LG
Hallo Thomas,
AntwortenLöschendanke dafür, dass du diese leichte Anleitung geschrieben hast.
Leider funktioniert auf meinem Testblog nichts.
Ich kann weder ein einzelnes Bild von Picasa mit Lightbox öffnen (noch ein gesamtes Album, denn das hatte ich ursprünglich vor).
Könntest du dir das bitte einmal ansehen?
Link:
http://photoliana.blogspot.com/2010/07/test-123.html
Hallo Haramiya,
AntwortenLöschenich biete derzeit nur die Lightbox in der ersten Version an. Mit Lightbox 2 kannst Du ein "Album" mit "Weiter" anzeigen.
Lightbox 2 findest Du unter http://www.lokeshdhakar.com/projects/lightbox2/
Sonst passt der Einbau doch. Lightbox 1 funktioniert auf Deiner Testseite.
Hallo Thomas,
AntwortenLöschensuper Script - Ich habe es mal auf http://nephrotranz.blogspot.com eingebaut. Ausserdem hat es noch einen grossen Vorteil gegenüber der Version von bloggerplugins.org, es lädt wesentlich schneller und nachdem ich den Quelltext von bloggerplugins.org eingebaut hatte, wurden in meinem Design die Leser nicht mehr angezeigt...
LG
Michael
Hi, also bei mir funktioniert es wunderbar. vielen dan dafür (:
AntwortenLöschenlg
Hallo Thomas,
AntwortenLöschenich muss auch erstmal ein Lob loswerden. Tolle Sache, dass du hier für uns GoogleBlogger so einen tollen Service betreibst.
Ich hätte nochmal eine Frage bezüglich der Farbe des Bildtitels in der Lightbox. Habe nun schon einige Male versucht den Code wie oben beschrieben ins Template einzubauen um die Farbe des Bilduntertitels zu verändern.
Leider mache ich mir damit das Erscheinungsbild der Lightbox nur kaputt. Kannst du evtl. nochmal genauer beschreiben wo der o.g Text eingefügt werden muss bzw. was im Template überschrieben werden muss? Wäre Dir dankbar.
viele grüße
Sake
Hallo Sake,
AntwortenLöschenich bin leider auch kein CSS Guru der Dir mit dem Erscheinungsbild der Lighbox richtig weiterhelfen kann. Wenn Du etwas Forschergeist in Dir hast, kannst Du Dir das Add On "Firebug" für Firefox herunterladen und schauen, welche Styles betroffen sind. Dann kannst Du den Style überschreiben und ihm Dein Gusto geben. Ich hoffe das hilft Dir weiter?
Vielen Dank für dieses "Tutorial" (: Es funktioniert super und sieht einfach viel besser aus!
AntwortenLöschenich hab mal ne lösung gebaut die ohne editieren der jeweiligen posts auskommt
AntwortenLöschenhttp://mac-and-i.blogspot.com/2011/03/how-to-integrate-lightbox-in-your-blog.html
hoffe das hilft weiter
@mac-and-me Sehr smarte Lösung! Gefällt mir wirklich gut.
AntwortenLöschenGesucht - hier gefunden - eingebaut - fluppt!
AntwortenLöschenDanke!
Ich komm damit garnicht zurecht.
AntwortenLöschenHab den HTML Code oben eingetragen, und was nun ?
Muss ich den Post erst normal schreiben, Fotos hochladen und dann in der HTML ansicht diesen Code irgendwo eintragen ?
Ich nutze auch kein Picasaweb, geht das dann trotzdem ?