iframe, lightbox

  • Hallo ihr Lieben :-)

    Ich habe auf folgender Seite etwas gefunden, was mir sehr gut gefällt:
    https://www.apple.com/de/iphone-xr/display/ Wenn man dann weiter runter scrollt bis "So funktioniert's", öffnet sich eine Art Lightbox.

    Ich finde die Idee sehr schön, um viel Content unterzubringen, ohne dass es den Lesefluss etc. stört. Ich würde sowas also auch gerne auf meiner Seite unterbringen.

    Meine Idee war es, einen iframe in einer lightbox zu öffnen. Grundsätzlich funktioniert das auch schon mal - sieht aber irgendwie nicht so gekonnt aus wie da, da zum einen der Hintergrund immer noch scrollable ist und ich es auch irgendwie nicht schaffe, die Größen richtig einzustellen (sprich body vom iframe und darzustellende lightbox zu einzustellen, dass der Scrollbalken wegfällt).

    Hat ggf. jemand einen Tipp, wie ich das angehen könnte?

    Also hier noch mal genauer definiert, was zur Zeit daran meine Probleme sind:

    - Der Hintergrund scrollt mit (also die eigentliche Hauptseite), das finde ich nicht so gut, die sollte fix sein.
    - Im Frame selbst kann man scrollen (habe es schon auf scrolling=no gestellt aber das wird irgendwie nicht übernommen.
    - und ich finde die Idee mit dem Kreuz (zum beenden/schließen) auf der Beispielseite auch besser, dass es innerhalb des Frames ist und nicht außerhalb (das stört mich aber nicht so sehr).

    Was ich auf der Beispielseite rausfinden konnte (zumindest meine ich das), dass das ganze nicht über eine Lightbox bzw. einen iframe gelöst wurde sondern anscheinend ganz anders.

    Ich muss es nicht genauso machen, aber die oben genannten Punkte (vor allem das Scrolling) würde ich irgendwie gerne umsetzen.

    Die Seite ist leider noch nicht veröffentlicht, ich kann aber ansonsten auch gerne Screenshots hochladen, falls das hilft :-)

    Ansonsten danke ich euch schon mal!!!

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Achso, was vielleicht auch noch hilfreich wäre.
    Ich habe den iframe wie folgt in der lightbox eingebunden:

    Ich habe das Plugin "Easy Fancy Box" installiert und dann an der Stelle, an welcher die Lightbox mit Inhalt des iframes "aufploppen" soll durch klick auf einen Button mit folgendem Code hinterlegt:

    HTML
    <a id="Test_Erstellung" href="/inhalt-2/" rel="lightbox" data-lightbox-type="iframe" data-width="1068px" data-height="800px"><img class="aligncenter" src="/Plus.jpg" width="25px" /></a>

    Die Seite "inhalt-2" besteht nur aus dem Revolution Slider, bei dem ich den Slide (Hero) mit einer Größe von w=1068px und h=707px hinterlegt habe :-)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!