Poppende Bilder: Etwas über Lightbox-Effekte im Blog
Liebe Leute,
zu Hause haben wir eine Baustelle und im Blog sieht es ebenso aus: Das Theme wurde komplett neu aufgesetzt (auch wenn es äußerlich fast so aussieht als bisher). Es hakt noch an vielen Stellen und einiges muss noch optimiert werden. Doch nun ist es endlich soweit, dass ich wenigstens mal wieder Content liefern kann. 
Im Zuge der Optimierungsarbeiten überlegt ich mir auch, welcher “Lightbox-Effekt” im Blog eingebaut werden soll. Die Frage ist durchaus berechtigt, denn Lightbox ist nicht gleich Lightbox. Oftmals ist es auch eine “Heavybox”, deshalb kommt es durchaus darauf an, dass man den “passenden” Effekt wählt.
Das t3n-Magazin ist um eine Attraktion reicher: Dort gibt es nun eine Community, bei der Ihr Fragen zu den Themen Web 2.0, Open Source, Webentwicklung oder E-Business stellen oder beantworten könnt. So stellte ich dort vor ein paar Tagen auch eine Frage, die dankenswerterweise glänzend beantwortet wurde:
Was haltet Ihr von Lightbox-Effekten für Bilder im Blog? Alles Quatsch oder schicke Garnitur?
Welche sind bei Euch im Einsatz? Kennt Ihr empfehlenswerte Scripte?
Thomas Quensen meinte, ein Lightbox-Effekt sei besser als das große Bild auf einer neuen Seite anzuzeigen oder garnicht anzubieten. Dieser Meinung schließe ich mich vollkommen an. Jedenfalls nannte er einen Link zu einem Projekt, bei dem zahlreiche Lightbox-Effekte in einer Tabelle aufgelistet sind.
Was ist der “richtige” Lightbox-Effekt für mich?
In der o.g. Tabelle ist auch aufgelistet, welche Javascript-Dateien für die zahlreichen Lightblox-Clone jeweils erforderlich sind. Das Ganze sieht so aus (bei der Gelegenheit könnt Ihr meinen “Lightbox-Effekt gleich anschauen und Euren Senf dazu abgeben, wenn Ihr möchtet):
Lightbox-Effekte im Überblick (klicken zum Vergrößern)
Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, oder ob Ihr Euch überlegt, welche Skripte bei Euch ohnehin aktiv sind. Denn viele Themes und Plugins erfordern für mehr oder weniger hilfreichen Schnickschnack einiges an Javascript-Power. So hatte ich vor einiger Zeit noch das WordPress-Plugin “Lightbox 2” aktiv, das neben den ohnehin vorhandenen Skripten (Lightbox.js und Lightbox-resize.js) noch 172k Prototype.js + Scriptaculous.js ludt. Das war eigentlich total unnötig, denn für andere Lightbox-Effekte war der vorhandene Blog viel besser geeignet. Meine Wahl fiel auf Fancybox, das neben dem hauseigenen Skript nur noch jquery.js benötigt, das bei mir ohnehin aktiv ist. Für Fancybox gibt es übrigens auch ein WordPress-Plugin, das allerdings entbehrlich ist. Eine weitere Beschreibung des nachfolgend vorgestellten Effekts findet Ihr bei Caschy.
Schaut am Besten mal in Eurem Blog nach, welche Javascript-Dateien mit Lightbox-Effekt und welche ohne Lightbox-Effekt geladen werden. Hierfür gibt es zahlreiche Tools und Programme, die ich im Artikel “Blogladezeiten optimieren” vorgestellt habe.
Fancybox in WordPress einbinden
Das ist eigentlich nicht so schwer und wird auf der Herstellerseite auch gut erläutert. Ich fasse das ma ganz schnell zusammen:
1.) Javascript Dateien, Stylesheets und Bilder hochladen
2.) Javascript einbinden
im Normalfall in der header.php:
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.0.pack.js"></script>
Nach “src” tragt Ihr natürlich Euren eigenen Pfad ein (aus Schritt 1). Vergewissert Euch, ob jquery.js aktiv ist – falls nicht, bindet Ihr es gleichfalls ein.
3.) Stylesheet einbinden
ebenfalls im Normalfall in der header.php:
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.0.css" type="text/css" media="screen">
Auch hier tragt Ihr wieder Eure eigene Adresse ein. Die Stylesheet verweist u.a. auf die Grafikdateien, die Ihr im Schritt 1 hochgeladen habt. Ggf. müsst Ihr die Datei noch bearbeiten, wenn die Grafikdateien in einem anderen Ordner gesteckt habt.
4.) “Popups” im Beitrag richtig verlinken
Damit sich der Pop-Effekt auch auswirkt, müsst Ihr die Bildverweise auch richtig verlinken. Ihr fügt einfach das Attribut rel=”fancybox” hinzu. Das sieht dann beispielsweise so aus:
<a rel="fancybox" href="http://www.plerzelwupp.de/wp-content/uploads/2010/02/Lightbox01.png">
Damit Ihr das nicht jedes Mal machen müsst und Fancybox auch auf die vorhandenen Bildverweise anspringt, solltet Ihr noch eine passende Regel hinzufügen. Folgenden Code hab ich aus dem oben verlinkten Plugin geklaut:
<script type="text/javascript">
jQuery(document).ready(function($){
var select = $('a[href$=".bmp"], a[href$=".gif"], a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".BMP"], a[href$=".GIF"], a[href$=".JPG"], a[href$=".JPEG"], a[href$=".PNG"]');
select.attr('rel', 'fancybox');
select.fancybox();
});
</script>
Das war’s auch schon. Ab sofort könnt Ihr munter drauf los poppen.
Anwendungsmöglichkeiten von Fancybox:
Die Anwendungsmöglichkeiten sind sehr vielfältig. Es kann eine kleine Bildergalerie sein, die man dann auch durchklicken kann, oder einfach nur ein Textlink sein. z.B.
Ein paar Bilder (Beispiele):
- Bild 1: Herbst
- Bild 2: Urlaub in Kambodscha
- Bild 3: Singapore von oben
- Bild 4: Mein Kamel hat AUA
- Bild 5: Plerzelwupp bei Nacht
Auch Youtube Videos können eingebettet werden:
Hier könnt Ihr beispielsweise sehen, wie es bei mir zu Hause zugeht:
plerzelwupp (Oliver) bei den Bunnies
Für Youtube Videos ergänzt Ihr ganz einfach den Code (z.B. in der header.php), der auf der Seite von Fancybox dargestellt wird und ergänzt Eure Youtube-Verlinkung mit dem Attribut id=”tip4″.
Workaround bei Problemen
Falls der Effekt bei Euch ausbleibt, dann vergewissert Euch, dass die Stylesheet-Datei und Javascript ordnungsgemäß eingebunden sind. Benutzt hierfür eines der genannten Hilfsmittel aus dem oben verlinkten Artikel.
Vergewissert Euch außerdem, dass die Bilder in der Stylesheet ordnungsgemäß verlinkt sind.
Wenn es immer noch nicht geht erhaltet Ihr mit Firebug möglicherweise die Fehlermeldung:
jQuery: “$ is not a function”
In diesem Fall ersetzt Ihr im Javascript-Code sämtliche $-Zeichen durch “jQuery” und stellt die Codezeile jQuery.noConflict(); voran. der Code für obiges Youtube-Video lautet dann wie folgt:
<script type="text/javascript">
jQuery.noConflict();
jQuery("#tip4").click(function() {
jQuery.fancybox({
'padding' : 0,
'autoScale' : false,
'transitionIn' : 'elastic',
'transitionOut' : 'elastic',
'easingIn' : 'easeOutBack',
'easingOut' : 'easeInBack',
'title' : this.title,
'width' : 680,
'height' : 495,
'href' : this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
'type' : 'swf',
'swf' : {
'wmode' : 'transparent',
'allowfullscreen' : 'true'
}
});
return false;
});
</script>
So etwas wie ein Fazit
Wenn Ihr Bilder nicht auf eine neue Seite verlinken wollt, dann sind Lightbox-Effekte unerlässlich. Für welchen Effekt Ihr Euch entscheidet, bleibt natürlich Euch überlassen. Doch sollte bei der Wahl beachtet werden, dass es von Vorteil ist, einen Effekt zu wählen, dessen Skripte ohnehin am Laufen sind (für die “Kurzleser”: Das ist oben näher erläutert).
Natürlich eigenen sich auch Plugins – es gibt jede Menge davon; für die unterschiedlichsten Blogsysteme. Doch ich denke, mit der o.g. Liste seid Ihr besser bedient. U.a. auch deswegen, weil sich die Javascript-Dateien besser steuern lassen und ggf. zusammengefügt werden können. Doch darüber schreibe ich das nächste Mal.
Benutzt Ihr eigentlich solche Effekte? Was haltet Ihr davon? Hab ich Euch ein klein wenig inspiriert? Habt Ihr Lust auf poppende Bilder in Eurem Blog? – Ich freue mich über Eure Kommentare. 
Foto: “Paarungszeit” © Bernd Boscolo / PIXELIO (beschnitten)
Ähnliche Artikel
6 Javascript-Tipps für Deinen Blog Eine kleine Zusammenfassung In den vergangenen Artikeln hab ich einiges über die Optimierung des Blogs, insbesondere im Hinblick...
Fotogalerie in den Blog einbinden Online Webalben Viele Anwender stellen Ihre Bilder in Online-Webalben zur Verfügung. Sie nutzen Picasa, Flickr, die...
Drei Methoden um eine Fotogalerie im Blog einzubinden Ihr wollt Euren Blog um eine Fotogalerie ergänzen? Kein Problem: Hier erfahrt Ihr, wie das geht. Für die Einbindung...
Blick über den Tellerrand Surfpsuren In den letzten Tagen standen Beruf und Privates im Vordergrund, sodass es hier etwas gemächlicher zuging. Doch...
Tabellen in einen Blog einfügen Hier erfahrt Ihr, wie Ihr ganz einfach Excel-, Calc-, oder google-spreadsheets ("Text und Tabellen") in Euren Blog...
Trackbacks/Pingbacks
- newstube.de - Poppende Bilder: Etwas über Lightbox-Effekte im Blog... Über die Wahl des "richtigen" Lightbox-Effekts im eigenen Webauftritt. Welche Effekte gibt es; wie ...
- t3n.de/socialnews - Poppende Bilder: Etwas über Lightbox-Effekte im Blog... Über die Wahl des "richtigen" Lightbox-Effekts im eigenen Webauftritt. Welche Effekte gibt es; wie ...
- 6 Javascript-Tipps für Deinen Blog - combine, javascript, zusammenführen, jquery, footer, komprimieren - Plerzelwupps Erfahrungen - [...] Poppende Bilder: Etwas über Lightbox-Effekte im Blog [...]
- Fotogalerie in den Blog einbinden - Fotogalerie, einbinden, Wordpress, Blog, Homepage, iframe, fancybox - Plerzelwupps Erfahrungen - [...] Artikel “poppende Bilder” hab ich einiges über Lightbox(en) geschrieben und dargestellt: welche Möglichkeiten es [...]
Einen Kommentar schreiben
Folge mir
Hier bloggt Oliver aus Mannheim mit Themen rund um Hardware, Software, Schapernack und Internet. Folge mir:
Letzte Kommentare
- Potsmoggy: “Achja… bist der erste Eintrag bei der Eingabe ”...” (in Youtube Sperre umgehen – drei Methoden)
- Irene K.: “Hallo, stehe gerade vor dem Problem, dass in...” (in SkyDrive – 25GB kostenloser Onlinespeicher im Explorer)
- Réance: “Bin auch für DoFollow Aber war das nicht so, dass Google No-Follow links nicht...” (in follow oder nofollow?)
- Trash Tiffy: “Hallo, ich habe vor kurzem meinen Blog...” (in Der eigene (kostenlose) Blog: Eine Wordpress-Anleitung von A-Z)
- youtube.com: “Hey, danke für die Infos. Ich hab schon lange versucht,...” (in Youtube Sperre umgehen – drei Methoden)
Hi Oliver,
mal wieder ein sehr guter und ausführlicher Bericht von dir. Diese Übersicht ist mir auch schon mal unter die Finger gekommen. Die ist sehr interessant um den passenden Effekt zu finden, der auch dazu noch den wenigsten Ressourcen verbraucht. Ich habe leider ein Flickr Plugin bei dem ich nur zwischen Lightbox und Highslide wählen kann
Viele Grüße
Thomas
Hallo Thomas, herzlichen Dank
Nun, die 5 Bilder im obigen Beispiel sind auch auf Twitter gehostet. Da kann ich frei aus der Liste wählen; die meisten Skripte werden externe Bilder unterstützen. Aber dein Flickr-Plugin hat sicherlich einen anderweitigen Mehrwert.
Ansonsten ist so ein Skript für einen Anwender wie dich in 5min eingebunden
Schöne Übersicht, danke. Ich hab bei mir gar keinen Lightbox-Effekt, die Bilder sind einfach so verlinkt (und ohne target=_blank, versteht sich). Hat ja auch den Vorteil, dass auch große Bilder gut dargestellt werden (i.d.R. vom Browser skaliert) – und den Nachteil, dass es irgendwie ein Bruch in der Darstellung ist und bei mehreren Bildern etwas unkomfortabel wird, weshalb ich mir auch schon eine Lightbox überlegt habe.
Im Prinzip ist jede Animation, die nicht ruckzuck “am Ziel” ist, aber auch nervig; deine hier ist angenehm schnell, aber manch andere, die man so findet, die erst den Bildhintergrund horizontal und dann vertikal aufzoomen, sind mir zu störend. Bei deiner hier stört mich höchstens, dass sie erst noch größer wird, wenn man sie schließt…
Interessant ist auch die Einbindung von Videos – spart Platz im Beitrag (gerade wenn das Video nicht so essentiell für den Beitrag ist), hat aber den Nachteil, dass man schlecht gleichzeitig weiterlesen kann.
Nun ja, mal sehen, ob ich so was demnächst bei mir einbaue – aber wenn, dann ein schlankes, das auf jQuery basiert.
Herzlichen Dank für Deine ausführliche Stellungnahme. Das Schöne an dem hier vorgestellten Script ist, dass du den Effekt selbst steuern kannst. Für den Beitrag hier hab ich eingestellt, dass sie kurz größer werden, bevor sie “elastisch” verschwinden. Sicherlich ist das Geschmackssache.
Du kannst aber auch fader-Effekte verwenden sowie die Geschwindigkeiten beeinflussen, usw.
Das kann direkt in der Javascript-Datei “eingestellt” werden und ist auch sehr gut dokumentiert: http://fancybox.net/api
Schöne Fotos, geniales Video und Gratulation zu deinem neuen “alten” Theme.
Weiterhin viel Erfolg auf der Baustelle zuhause wie auch hier auf plerzelwupp.de.
Ein angenehmes Wochenende und bis bald,
Alex
Hey Alex,
herzlichen Dank
Ich hab ja jetzt das ganze Wochenende Zeit, am Blog zu spielen. Im Moment versuche ich mich gerade an den Hintergrundbildern, die ich in Sprites zusammenfasse. Uff, was für eine Arbeit.
Ich habe bei mir auch Fancybox im Einsatz. Gefällt mir insgesamt am besten (kein Wunder, dass auch Apple auf Fancybox setzt).
Übrigens: großartige Überschrift, vor allem in Verbindung mit dem ersten Foto.
Das Schöne an Fancybox ist auch, dass sich der Effekt beliebig steuern lässt.
Ja, die Überschrift und das Bild *g Was man nicht alles macht, um Besucher heranzulocken
Ich kenne mich mit den Boxen eigentlich gar nicht so gut aus. Nun habe ich aber ne Weile in deinem Artikel rumgelesen und das hat dann mein Interesse geweckt. Nun finde ich, dass eine Lightbox auf alle Fälle besser ist, als den Content in einem neuen Fenster darzustellen. Wer sich ein Bild anschauen möchte, der hat keine Lust am Ende der Internetsession eventuelle etliche Bildfenster wieder schließen zu müssen.
Genau das war auch meine Intention. Das Hauptfenster mit dem Content bleibt stets geöffnet. Dafür nimmt man etwas Javascript gerne in Kauf
Schöne Übersicht. Für Videos ist das eine gute Idee. Bilder in einer Lightbox halte ich nicht für vorteilhaft. Direkt verlinkte Bilder skaliert der Browser automatisch wie cimddwc schon schrieb, außerdem funktioniert der Zurück-Button! Für den habe ich z.b. eine extra Taste an der Maus bzw. verwende Mausgesten.
An die Tatsache, dass Mausgesten behindert werden, hab ich (ehrlich gesagt) nicht gedacht. Da pflichte ich Dir vollkommen bei.
Die automatische Browserskalierung dürfte jedoch kaum ausschlaggebend sein. Wenn ich wirklich mal ein großes Bild anbieten sollte, das den Rahmen eines 15-zollers überschreitet, kann ich den Effekt für diesen Link immer noch unterbinden.
“Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, ”
Pfui Plerzi….. also wirklich
Okay, Spaß nu gut, ernsthaft nu: Wirklich gut beschrieben, auch wenn ich nach wie vor die bequeme Variante von Plugins nutze
Mensch Patsy …. was Du wieder denkst
Kurz bevor ich den Artikel schrieb, stellte ich fest, dass der gleiche Effekt bei dir im Einsatz ist (hab’s dir noch geschrieben). Auch wenn du hier und da zur “einfacheren” Lösung greifst, bewundere ich doch Deine Experimentierfreudigkeit. Geschmack hast Du ja. AUßerdem gefällt es mir, dass du auch für jeden Käse zu haben bist
Stimmt, in dem Punkt bin ich einfach schrecklich! Wenn ich irgendwo was sehe, was mir gefällt, muss ich es gleich auf meiner Seite einbauen und treibe meine Leser in den Wahnsinn
Aber du weißt ja, wie ich das sehe – nämlich eine ständige “Weiterentwicklung”, weil Stillstand einfach “laaaaaaangweilig” ist
Ich hab’s mir ganz einfach gemacht und benutze einen – wie ich denke – recht benutzerfreundlichen Effekt, der per WP-Plugin realisierbar ist: FancyZoom (http://stadt-bremerhaven.de/bilder-zoomen-mit-javascript/). Der Vorteil ist, dass man ein Plugin installiert, fertig. Ist auch konfigurierbar, wenn man möchte. Man sieht beim Draufklicken, wie das Bild mit einem Zoomeffekt vergrößert wird und ganz wichtig! – nicht nur mit dem kleinen X am oberen Rand wieder klein wird, sondern, indem man grobmotorisch einfach irgendwo auf das Bild klickt. Für mich die optimale Lösung.
Hallo Martin,
herzlichen Dank für deine Stellungnahme. Wie ich sehe, benutzt Du genau das Skript, welches hier auch ausführlich vorgestellt ist.
Das Schließen des Bildes per Klick auf das Bild ist natürlich auch möglich. Doch hab ich mich dazu entschlossen, die Galeriefunktion (zum Durchklicken der Bilder) zu verwenden. Zusätzlich können auch Videos eingebunden werden. Ach …. viele Wege führen nach Rom
Danke für die Info ein super Beitrag. Es macht spaß hier zulesen.
Robert
Dankeschön
Schöne reißerische Überschrift und dann ein sehr informativer Artikel. So macht Blog lesen Spaß.
Gruß
Fulano
Hallo Fulano,
was ein Zufall – heute hab ich mich auf Deiner Seite umgeschaut, wenig später kam dein Kommentar. “Dualität der Ereignisse”
Herzlichen Dank für Dein Lob
Mit dem Lightbox-Schrott darf ich mich die Tage och noch herumschlagen, da freue ich mich schon ganz dolle ‘drauf. Leider nicht in ‘nem Blog, sondern schön in das Design einer simplen Webseite integriert.
Übrigens sehe ich gar nüschts im Header, kein Logo, nada. Ob das daran liegt, dass die Skripte auf plerzelwupp.de zwar erlaubt sind, die von bierreth.eu jedoch nicht – mag sein.
Hey Ronny, Hippie
genauso ist es
Aber keine Angst – bierreth.eu gehört auch mir. Es ist eine Subdomain, damit Browser die Seitenelemente gleichzeitig von plerzelwupp und bierreth laden können. Dient einzig und allein der Beschleunigung.
Was dein Vorhaben betrifft, so stehe ich dir gerne mit Rat und Tat zur Seite
Dankeschön. – Ich schicke Dir Freundin vorbei, die wollte eh HTML lernen, obwohl sie null Zeit dazu hat, also escht minus Null, aber dennoch stets alles wissen und einleuchtend erklärt haben möchte, zum Ahhhh. Eh super, ich hasse irgend was sonstwem zu erklären, da fehlt mir völlig die Kompetenz und Bereitschaft, was folglich immer in Motzerei endet.
Vielen Dank für Ihre Informationen. Es war eine große Hilfe.
lightboxen sind die neue seuche im internet.
einfach nur nervig. wenn ich ein photo anklicke, will ich es gleich in ganzer größe sehen und nicht erst in so einem ätzenden popup gedöns mit wegklick kreuz. brutal nervig, immer erst javascript zu deaktivieren, um diesem schrott zu entkommen.
Ja, aber manchmal passt so ein Riesen-Bild einfach nicht zum Artikel, aber ein kleines Bild wäre zu ungenau. Wie gesagt, ich benutze FancyZoom (s. mein Kommentar weiter oben), der ist recht unaufdringlich und hat seine Vorteile.
danke für die Tips, ich kann das auch in Joomla gut anwenden : )
guter Tipp. Ich habe mal was ähnliches für den header gebastelt:
http://www.haushalts-trend.de
Visual Lightbox kann Thumbnail Vorschauen generieren, Bilder drehen und der eingebaute FTP Client sorgt für bequeme Web Uploads.
Sehr interessante und nützliche Übersicht zum Thema Lightbox plu ein paar gute Tipps – danke! Ich muss sagen, ich libe die Präsentation von Bildern per Overlay.
Vielen Dank für die Tipps
Hi,
zwar schon etwas verspätet, aber das macht ja nichts.
Ich finds mit ner Lightbox auch besser Bilder zu integrieren. Aber bei manchen isses auch recht nervig, wenn das einfach zu aufwendig is… aber nunja… recht intressant find ich auch die Variante so die Youtube Videos einzublenden.
Ich schließe mich an! Vielen Dank für die vielen Tipps! Davon kann ich echt einiges ganz gut in die Tat umsetzen! Großes Lob!
mit dem wp plugin FancyZoom funktioniert es bei mir auf anhieb einfach super! kann ich nur jedem empfehlen. ist einfach und leicht zu installieren.
ja, hast recht jens. fancyzoom ist klasse und nutze ich schon seit gut einem jahr auf verschiedenen webseiten von mir. echt ein guter tipp!
gibt es nicht noch andere tools, anstatt fancybox? finde es etwas langweilig, wenn jeder in seinem blog das selbe plugin nutzt.
ganz ehrlich gesagt, mich nervt dieser effekt. kann man nicht einfach wieder die bilder normal darstellen, wie vor ein paar jahren?