• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen

Plerzelwupps Erfahrungen

Anmelden

  • Anmelden
  • Feed der Einträge
  • Kommentare-Feed
  • WordPress.org
  • Startseite
  • Dies&Das
  • Anleitungen
  • WordPress
  • Google & Co
  • Tests
  • Windows
  • Fun
  • Firefox
  • Photoshop
Aktuelle Seite: Startseite / Anleitungen / Poppende Bilder: Etwas über Lightbox-Effekte im Blog

25. Februar 2010 von plerzelwupp

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

Test

Kategorie: Anleitungen, Wordpress Stichworte: Javascript, Lightbox, ohne Plugin, Plugin, Wordpress

Leser-Interaktionen

Kommentare

  1. Thomas sagt

    25. Februar 2010 um 19:48

    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 sagt

      25. Februar 2010 um 19:58

      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. cimddwc sagt

    25. Februar 2010 um 21:17

    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 sagt

      25. Februar 2010 um 21:33

      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. Alex sagt

    26. Februar 2010 um 08:01

    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 sagt

      27. Februar 2010 um 14:44

      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. Ruben sagt

    26. Februar 2010 um 12:47

    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 sagt

      27. Februar 2010 um 14:45

      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. Martin sagt

    26. Februar 2010 um 16:03

    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 sagt

      27. Februar 2010 um 14:49

      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. Chris sagt

    26. Februar 2010 um 20:32

    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 sagt

      27. Februar 2010 um 14:57

      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. patsy sagt

    27. Februar 2010 um 14:14

    „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 sagt

      27. Februar 2010 um 15:02

      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:

      • patsy sagt

        28. Februar 2010 um 10:11

        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. Martin sagt

    2. März 2010 um 00:13

    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 sagt

      2. März 2010 um 07:03

      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. Robert sagt

    3. März 2010 um 12:40

    Danke für die Info ein super Beitrag. Es macht spaß hier zulesen.

    Robert

    • plerzelwupp sagt

      5. März 2010 um 16:24

      Dankeschön 🙂

  10. Fulanos Worte sagt

    5. März 2010 um 12:07

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

    • plerzelwupp sagt

      5. März 2010 um 16:23

      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. Ronny Roger sagt

    5. März 2010 um 16:12

    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 sagt

      5. März 2010 um 16:21

      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 😉

      • Ronny Roger sagt

        5. März 2010 um 19:25

        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 sagt

    22. März 2010 um 14:18

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

  13. lightboxhasser sagt

    28. Juni 2010 um 05:53

    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.

    • Martin sagt

      28. Juni 2010 um 20:07

      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 sagt

    19. September 2010 um 14:13

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

  15. hansi sagt

    2. November 2010 um 19:56

    guter Tipp. Ich habe mal was ähnliches für den header gebastelt:
    http://www.haushalts-trend.de

  16. ip65 enclosure sagt

    26. Juni 2011 um 07:42

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

  17. Marina sagt

    21. Juli 2011 um 12:33

    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. Susy sagt

    8. September 2011 um 13:39

    Vielen Dank für die Tipps

  19. Jan sagt

    8. September 2011 um 14:51

    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. Martin sagt

    24. Oktober 2011 um 16:49

    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. Jens sagt

    25. Oktober 2011 um 12:10

    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. Viola sagt

    28. Oktober 2011 um 10:14

    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. Anja sagt

    23. November 2011 um 08:10

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

  24. Walter sagt

    6. Dezember 2011 um 10:28

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

  25. Online Druckerei sagt

    15. März 2012 um 11:28

    Danke für den Tipp.

Trackbacks

  1. newstube.de sagt:
    26. Februar 2010 um 07:20 Uhr

    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. t3n.de/socialnews sagt:
    26. Februar 2010 um 08:06 Uhr

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

  3. 6 Javascript-Tipps für Deinen Blog - combine, javascript, zusammenführen, jquery, footer, komprimieren - Plerzelwupps Erfahrungen sagt:
    7. März 2010 um 14:10 Uhr

    […] Poppende Bilder: Etwas über Lightbox-Effekte im Blog […]

  4. Fotogalerie in den Blog einbinden - Fotogalerie, einbinden, Wordpress, Blog, Homepage, iframe, fancybox - Plerzelwupps Erfahrungen sagt:
    28. März 2010 um 14:01 Uhr

    […] Artikel “poppende Bilder” hab ich einiges über Lightbox(en) geschrieben und dargestellt: welche Möglichkeiten es […]

Haupt-Sidebar

Suche

Navigation

  • Startseite
  • über mich
  • Kontakt
  • Impressum
  • Datenschutzerklärung

Neueste Kommentare

  • Umzug bei Computer Fernstart und Fernwartung – 7 Tipps
  • Umzug bei Computer Fernstart und Fernwartung – 7 Tipps
  • Hannes bei Computer Fernstart und Fernwartung – 7 Tipps
  • Brend bei Computer Fernstart und Fernwartung – 7 Tipps
  • Malte bei Computer Fernstart und Fernwartung – 7 Tipps

Archiv

Kategorien

  • Anleitungen (43)
  • Dies&Das (85)
  • Featured (7)
  • Firefox (7)
  • Fun (10)
  • Google & Co (21)
  • Photoshop (2)
  • Projekt 52 (19)
  • Tests (19)
  • Windows (14)
  • Wordpress (38)
  • Startseite
  • über mich
  • Kontakt
  • Impressum
  • Datenschutzerklärung

Copyright © 2023