Plerzelwupps Erfahrungen

Anmelden

Aktuelle Seite: Startseite / Anleitungen / Poppende Bilder: Etwas über Lightbox-Effekte im Blog

Leser-Interaktionen

Kommentare

  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

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

    • 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

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

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

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

    • 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 😉

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

    • 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 😉

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

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

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

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

  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?

Trackbacks

  1. Poppende Bilder: Etwas über Lightbox-Effekte im Blog…

    Über die Wahl des „richtigen“ Lightbox-Effekts im eigenen Webauftritt. Welche Effekte gibt es; wie werden diese integriert? Was ist dabei zu beachten? Incl. Beispielszenario: Einbindung von Fancybox in WordPress.    …

  2. Poppende Bilder: Etwas über Lightbox-Effekte im Blog…

    Über die Wahl des „richtigen“ Lightbox-Effekts im eigenen Webauftritt. Welche Effekte gibt es; wie werden diese integriert? Was ist dabei zu beachten? Incl. Beispielszenario: Einbindung von Fancybox in WordPress….