Poppende Bilder: Etwas ĂŒber Lightbox-Effekte im Blog

39 Kommentare
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ße

Artikel bewerten

Bewertung fĂŒr: Poppende Bilder: Etwas ĂŒber Lightbox-Effekte im Blog:
1 Stern2 Sterne3 Sterne4 Sterne5 Sterne
2,33 von 5 Sternen bei 3 abgegebenen Stimmen.
Loading...Loading...
  1. 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

    • plerzelwupp

      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 ;-)

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

    • plerzelwupp

      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

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

    • plerzelwupp

      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.

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

    • plerzelwupp

      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 ;-)

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

    • plerzelwupp

      Genau das war auch meine Intention. Das Hauptfenster mit dem Content bleibt stets geöffnet. DafĂŒr nimmt man etwas Javascript gerne in Kauf ;-)

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

    • plerzelwupp

      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.

  7. “Nun kommt es darauf an, ob Ihr einfach mal wild drauf los poppen wollt, ”
    Pfui Plerzi….. also wirklich :mrgreen:

    Okay, Spaß nu gut, ernsthaft nu: Wirklich gut beschrieben, auch wenn ich nach wie vor die bequeme Variante von Plugins nutze ;-)

    • plerzelwupp

      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 :mrgreen:

      • 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 :mrgreen:

        Aber du weißt ja, wie ich das sehe – nĂ€mlich eine stĂ€ndige “Weiterentwicklung”, weil Stillstand einfach “laaaaaaangweilig” ist ;-)

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

    • plerzelwupp

      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 ;-)

  9. Danke fĂŒr die Info ein super Beitrag. Es macht spaß hier zulesen.

    Robert

  10. Schöne reißerische Überschrift und dann ein sehr informativer Artikel. So macht Blog lesen Spaß.
    Gruß
    Fulano

    • plerzelwupp

      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 :-)

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

    • plerzelwupp

      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.

  12. Tagungshotel

    Vielen Dank fĂŒr Ihre Informationen. Es war eine große Hilfe.

  13. lightboxhasser

    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.

  14. werbeagentur

    danke fĂŒr die Tips, ich kann das auch in Joomla gut anwenden : )

  15. guter Tipp. Ich habe mal was Ă€hnliches fĂŒr den header gebastelt:
    http://www.haushalts-trend.de

  16. ip65 enclosure

    Visual Lightbox kann Thumbnail Vorschauen generieren, Bilder drehen und der eingebaute FTP Client sorgt fĂŒr bequeme Web Uploads.

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

  18. Vielen Dank fĂŒr die Tipps

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

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

  21. mit dem wp plugin FancyZoom funktioniert es bei mir auf anhieb einfach super! kann ich nur jedem empfehlen. ist einfach und leicht zu installieren.

  22. ja, hast recht jens. fancyzoom ist klasse und nutze ich schon seit gut einem jahr auf verschiedenen webseiten von mir. echt ein guter tipp!

  23. gibt es nicht noch andere tools, anstatt fancybox? finde es etwas langweilig, wenn jeder in seinem blog das selbe plugin nutzt.

  24. ganz ehrlich gesagt, mich nervt dieser effekt. kann man nicht einfach wieder die bilder normal darstellen, wie vor ein paar jahren?

  25. Online Druckerei

    Danke fĂŒr den Tipp.

Trackbacks/Pingbacks

  1. 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 …
  2. 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 …
  3. 6 Javascript-Tipps fĂŒr Deinen Blog - combine, javascript, zusammenfĂŒhren, jquery, footer, komprimieren - Plerzelwupps Erfahrungen - [...] Poppende Bilder: Etwas ĂŒber Lightbox-Effekte im Blog [...]
  4. 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 [...]