Iframe als popup

Paul_W. schrieb am 02.02.2021 um 12:59 Uhr

Hallo,

ich nutze MAGIX Web Designer Premium 15.1.0. und habe Vorschaubilder, die einen Iframe starten sollen. Idealerweise als Popup. Wie das mit einem Bild und dem Iframe auf einen neuen Ebene geht ist mir bekannt.

Jedoch habe ich ca. 30 Vorschaubilder auf der Seite, die je einen verschiedenen Iframe öffnen sollen. Würden diese Iframes alle auf Ebenen der einen Seite untergebracht würden sie alle beim Aufrufen der Seite gleichzeitig ihre Inhalte laden, was einen entsprechenden Datenstau verursachen würde.

Welche Idee gibt es, um von einer Seite verschiedene Iframes als Popup oder in Art von fancybox zu starten (also innerhalb eines Tabs zu bleiben)?

Aktuell habe ich alle 30 Vorschaubilder immer wieder komplett auf 30 Unterseiten, auf denen jeweils das angeklickte Bild einen jeweils vorhandenen Iframe öffnet. Optisch paßt es: pro Klick wird ein neuer Iframe geöffnet (und man denkt nicht, dass man auf eine neue, gleichaussehende Seite gelangt). Aber die Seitenpflege (Hinzufügen, etc) ist schrecklich, da man jede Änderung auf jeder der 30 Seiten einfügen muss.

Läßt sich der Sourcecode des Iframes per Klick verändern?

Vielen Dank für jede Hilfe!!

Kommentare

BeRo schrieb am 02.02.2021 um 13:50 Uhr

[...] Läßt sich der Sourcecode des Iframes per Klick verändern? [...]

Ja, das ist machbar... 😉

Wie Du das im WD anlegen kannst, dass habe ich vor ca. 4 Jahren hier beschrieben (klick).
Da findest Du auch die online Demo und einen Link zum Download der Projektdatei.

Das ist nur eine der möglichen Lösungen zu Deiner Frage.
Man kann mit der gezeigten Methode problemlos beliebig viele, auch unterschiedliche Mediendateien in einem einzigen iframe anzeigen lassen.
In der hier gezeigten online Demo kannst Du über die Navigationsleiste 5 verschiedene Media Formate in einem Platzhalter (+iframe) anzeigen.

Die Projektdatei dazu kannst Du inkl. aller Codes u. Mediadateien hier herunterladen (klick). 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 02.02.2021 um 14:18 Uhr

@Paul_W.

Ergänzend: die Inhalte der Iframes werden erst auf Klick geladen. Somit muss man sich um die Dauer des Seitenaufrufs aufgrund der Frames keine Gedanken machen. Gruß Marboe

Paul_W. schrieb am 02.02.2021 um 15:45 Uhr

Hallo BeRo, trotz Suchen bisher nicht gefunden. Sieht aber nach tüfteln aus. Werde ich ausprobieren. Danke!

Hallo Marboe, Deine Aussage bezieht sich aber auf BeRos Tipp, oder? Denn auch auf eine zunächst nicht sichtbare Ebene gelegt würde der Iframe doch sofort bei Seitenaufruf laden. Oder habe ich da etwas ganz falsch verstanden?

Paul_W. schrieb am 02.02.2021 um 16:09 Uhr

[...] Läßt sich der Sourcecode des Iframes per Klick verändern? [...]

Ja, das ist machbar... 😉

Wie Du das im WD anlegen kannst, dass habe ich vor ca. 4 Jahren hier beschrieben (klick).
Da findest Du auch die online Demo und einen Link zum Download der Projektdatei.

Das ist nur eine der möglichen Lösungen zu Deiner Frage.
Man kann mit der gezeigten Methode problemlos beliebig viele, auch unterschiedliche Mediendateien in einem einzigen iframe anzeigen lassen.
In der hier gezeigten online Demo kannst Du über die Navigationsleiste 5 verschiedene Media Formate in einem Platzhalter (+iframe) anzeigen.

Die Projektdatei dazu kannst Du inkl. aller Codes u. Mediadateien hier herunterladen (klick). 🤓


Also funktionell das was ich suche. Auf die Schnelle probiert den Hintergrund (Rahmen) des HTML-Platzhalters auf ganze Breite auszudehnen. Macht aber Probleme (darunterliegender Text plötzlich über Hintergrund/Rahmen.

Wohin packe ich denn mein fullscreen=allow? Im Body code funktioniert es nicht?

BeRo schrieb am 02.02.2021 um 17:18 Uhr

[...] fullscreen=allow? Im Body code funktioniert es nicht? [...]

Das wundert mich nicht wirklich. 😉
Innerhalb von iframes in Platzhaltern ist die "fullscreen" Funktion normalerweise auf die Dimension des Platzhalters beschränkt. Die tatsächliche Browserfenster Größe wird von der Funktion nicht "gesehen". 😒

[...] darunterliegender Text plötzlich über Hintergrund/Rahmen [...]

Hier kommen die Hierarchie Ebenen ins Spiel, die der WD auf seine eigene Art händelt. Fixierte Objekte werden z. B. immer in den Vordergrund geholt, egal wo Du sie in der Seiten- & Ebenen-Galerie angesiedelt hast...

Beschreibe doch mal genauer, was Du planst. Ich bin (fast) sicher, dass uns dazu was einfällt, was Dir helfen kann... 🤓

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Paul_W. schrieb am 02.02.2021 um 18:59 Uhr

[...] fullscreen=allow? Im Body code funktioniert es nicht? [...]

Das wundert mich nicht wirklich. 😉
Innerhalb von iframes in Platzhaltern ist die "fullscreen" Funktion normalerweise auf die Dimension des Platzhalters beschränkt. Die tatsächliche Browserfenster Größe wird von der Funktion nicht "gesehen". 😒

Beim bisherigen Projekt mit dem WD habe ich ein allow fullscreen im Platzhalter nachträglich erfolgreich einfügen können. Deshalb habe ich mich gewundert.

Meine Seite www.show360.de ist im WD erstellt. Mir geht es um die Unterseite "virtuellen Räume", wo eine Auflistung von Fotoansichten die Auswahl vorgibt und man per Klick den zum Foto gehörigen virtuellen Rundgang in einem Iframe startet.

Dieser Iframe ist momentan immer oben auf der Seite und man kann wieder zu den Ansichten herunterscrollen. Wie in der Adresszeile zu sehen ist, gibt es für jede Ansicht eine eigene Seite. Auf jeder Seite oben ein Iframe und darunter wieder ALLE Ansichtsfotos. Möchte ich einen neuen Rundgang hinzufügen, muss ich das Ansichtsfoto auf jede dieser Seiten einfügen. Wenn´s eng wird muss ich jede dieser Seiten im Fußbereich erweitern. Sehr aufwendig.

Eleganter wäre nur eine Seite (die auch dementsprechend einfach erweitert werden kann) und bei Klick ein erscheinender Iframe mit dem entsprechenden Rundgang über dem Vorschaubild.

Von Dir oben genanntes Projekt wird mir bestimmt helfen. Jedoch muss ich den erscheinenden Iframe samt Rahmen noch modifizieren können (z.B. ganze Breite) und (wichtig) ein fullscreen hinbekommen.

 

BeRo schrieb am 02.02.2021 um 20:04 Uhr

[...] Beim bisherigen Projekt mit dem WD habe ich ein allow fullscreen im Platzhalter nachträglich erfolgreich einfügen können. [...]

Das ist ein Irrtum 😉

Wie Du siehst, wird die im iframe eingebettete 3D Ansicht nur so breit angezeigt, wie im iframe definiert wurde, hier also max. 1920 px.
Außerdem erzeugt das Attribut "allowfullscreen" mitnichten eine Vollbild Ansicht der eingebetteten Mediadatei, es stellt lediglich die Option bereit, die Vollbildansicht mit einem externen Script zu erzeugen.
Die Details zu der Technik findest Du z. B. hier (klick).

[...] Eleganter wäre nur eine Seite (die auch dementsprechend einfach erweitert werden kann) und bei Klick ein erscheinender Iframe mit dem entsprechenden Rundgang über dem Vorschaubild. [...]

Schau Dir mal die Lösungsvorschläge an, zu denen ich Dir weiter oben die Links gegeben habe. Damit sollte es machbar sein... 🤓

Eine vergleichbare Fragestellung hatten wir vor ein paar Jahren mal im Zusammenhang mit einem Slider (Diashow). Die da gefundene Lösung könnte Dir evtl. ebenfalls helfen.
Lies Dich mal ein (klick).

Zuletzt geändert von BeRo am 02.02.2021, 20:09, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Paul_W. schrieb am 02.02.2021 um 23:17 Uhr

Das ist ein Irrtum 😉

Wie Du siehst, wird die im iframe eingebettete 3D Ansicht nur so breit angezeigt, wie im iframe definiert wurde, hier also max. 1920 px.

Für die Startseite habe ich den Iframe extra breit gewählt, sodass der Eindruck eines in der Breite ausgedehnten Elements erscheint; die Seiten also bewußt ausserhalb der (damals) gängigen Bildschirme liegen.

Was ich mit allow fullscreen meine ist, dass die in der 3D-Ansicht eingebaute Fullscreen-Option auch genutzt werden kann. Entweder durch die Fullscreen-Taste im 3D-Menu (oben mitte 3 Punkte) oder rechter Mausklick in die 3D-Ansicht + enter fullscreen. Das Ergebnis ist die 3d -Ansicht in bildschirmfüllend, egal wie groß der Screen ist.

Diese Funktion konnte ich in der Projektdatei von vor 4 Jahren nicht realisieren.

Werde morgen mit Deinen Vorschlägen weitertüfteln. Besten Dank erst einmal.

Paul_W. schrieb am 03.02.2021 um 13:07 Uhr

Die o.g. Vari_iframe_pu-Datei als Vorlage hat schon sehr geholfen. Das Erscheinungsbild und Verhalten der Ebene konnte ich dank einiger Tipps hier im Forum anpassen (z.B. Popup-Hintergrund bildschirmfüllen durch entsprechende Größe von 20k px). Sogar mein allowfullscreen funktioniert nun.

Was einfach nicht funktionieren will ist, dass die Iframe-Gruppe (HTML-Platzhalter + CloseButton) sich zentriert anordnen läßt, sodass sie immer bei Aufruf der Ebene mittig im Bildschirm sitzt.

Die Forumstehemen behandeln eher das Zentrieren der Iframeinhalte. Ich hätte gerne den Iframe samt Closebutton in fester Größe zentriert. Dann wäre es perfekt.

Ich befürchte, dass es eine ganz einfache Funktion ist, die ich vielleicht schon gefunden aber nur falsch zugewiesen habe 😳.

Vielen Dank für einen weiteren Tipp 🙏

BeRo schrieb am 03.02.2021 um 14:36 Uhr

[...] Ich hätte gerne den Iframe samt Closebutton in fester Größe zentriert. [...]

Auch das ist leicht machbar... 😊

Schau Dir mal diesen Lösungsvorschlag an (klick). Weiter unten in dem Thread findest Du auch die Variante mit dem "close" Button, der in der popup Gruppe erscheint...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Paul_W. schrieb am 03.02.2021 um 14:56 Uhr

[...] Ich hätte gerne den Iframe samt Closebutton in fester Größe zentriert. [...]

Auch das ist leicht machbar... 😊

Schau Dir mal diesen Lösungsvorschlag an (klick). Weiter unten in dem Thread findest Du auch die Variante mit dem "close" Button, der in der popup Gruppe erscheint...

Danke, das habe ich schon erfolglos probiert.

Sobald ich die Gruppe auf der Ebene gebildet habe - mit Button und HTML-Platzhalter, läßt sich die Ebene nicht mehr aufrufen, bzw. erscheinen die Elemente nicht mehr.

BeRo schrieb am 03.02.2021 um 15:03 Uhr

[...] Sobald ich die Gruppe auf der Ebene gebildet habe [...] läßt sich die Ebene nicht mehr aufrufen [...]

Dann hast Du vermutlich irgendwo einen "Knoten" fabriziert. 🙃
Zeige uns doch mal, wie Du das genau gemacht hast...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Paul_W. schrieb am 03.02.2021 um 15:31 Uhr

Befürchte ich sehr....

hier die Schritte:

Die Vari_iframe_pu-DemoDatei. Weiche Gruppen in der Ebene aufgelöst, Rechteck in 20000x20000px angelegt.

Slider2 link für diesen Test angepaßt.

Hier die Codierung für die Menuleiste, die die Ebene aufruft und buttonspezifisch den Code im Iframe anpaßt (nichts geändert)

Ergebnis soweit ok, aber jetzt nur mittig gescrollt. Iframe erscheint da, wo auf der Seite platziert.

Nach "Popup Ebene zentrieren.."-Anleitung Elemente Gruppiert und "popup" genannt.

CSS für den Head eingefügt und Werte dem Iframe angepaßt.

...und weg is er :(

...und gerade das hier noch gefunden, was vielleicht die Probleme verursacht?

marboe schrieb am 03.02.2021 um 16:26 Uhr

Nach "Popup Ebene zentrieren.."-Anleitung Elemente Gruppiert und "popup" genannt.

Aber die Ebene heißt doch so :

Ich würde den Namen mal probieren. Gruß Marboe

Paul_W. schrieb am 03.02.2021 um 16:57 Uhr

Nach "Popup Ebene zentrieren.."-Anleitung Elemente Gruppiert und "popup" genannt.

Aber die Ebene heißt doch so :

Ich würde den Namen mal probieren. Gruß Marboe


Auch versucht: ohne Erfolg.

Ist aber laut dem Beispiel (klick) auch so nicht gedacht. Die zu zentrierenden Elemente sollen in einer Gruppe zusammengefaßt werden und diese den Namen popup zugewiesen bekommen. Denke, dass die Verknüpfung 2er Lösungen das Problem verursacht: einserseits der Iframe auf der Ebene, dessen Sourcecode per java variabel ist. Dann eine Gruppe von "einfachen" Elementen auf einer Ebene bei Aufruf zu zentrieren.

Paul_W. schrieb am 03.02.2021 um 17:21 Uhr

Noch einmal von vorne begonnen: sobald ich die Gruppe in der Ebene bilde, wird der Link der Buttonelemente: javascript: vid_stop(); xr_ppc('xr_xp4') auf die ganze Gruppe / Gruppenelemente übertragen. Gleichzeitig wird der Body des HTML-Platzhalters entfernt. Kann ich zwar wieder einsetzen, aber der Iframe erscheint trotzdem nicht.

BeRo schrieb am 03.02.2021 um 20:29 Uhr

[...] Nach "Popup Ebene zentrieren.."-Anleitung Elemente Gruppiert und "popup" genannt.
...und weg is er :( [...]

Das ist leicht nachvollziehbar...
Weil Du hier die Funktionen aus zwei verschiedenen Projekten "verheiratest", kommt der JScript Interpreter ins Schleudern. 😇

[...] sobald ich die Gruppe in der Ebene bilde, wird der Link der Buttonelemente: javascript: vid_stop(); xr_ppc('xr_xp4') auf die ganze Gruppe / Gruppenelemente übertragen. [...]

Das "Gruppieren" ist der Knackpunkt. Damit geht die Zuordnung der IDs verloren und die für sich funktionierenden Scriptlets laufen ins Leere.

Workaround als vorläufige Lösung:
Pack den iframe Code in eine DIV Box und gib der DIV Box die ID "popup", dann klappt's mit der Zentrierung der Videos/Slideshows, etc. 🤓

So kann das aussehen.

<div id="popup">
<iframe id='myiframe' style='border:0px #FFFFFF none;' scrolling='yes' frameborder='0' align=aus marginheight='0px' marginwidth='0px' height='337' width='600'>
</iframe>
</div>

Den für die Zentrierung benötigen CSS Code kopierst Du, wie empfohlen, in den HTML Head der Seite (oder des Platzhalters)

<style type="text/css">
  #popup {
    width:600px !important;
    height:338px !important;
    position:fixed;
    top:50% !important;
    left:50% !important;
    margin:-169px 0 0 -300px; /* [-(height/2)px 0 0 -(width/2)px] */
    display:inline;
  }
</style>

Bei der Gelegenheit kannst Du in Deinem aktuellen Projekt noch die "margin" Werte korrigieren, die hast Du vertauscht... 🙃

Die oben beschriebene Lösung ist nicht perfekt, weil der close Button außen vor bleibt. Der kann mit der Technik nicht in gleichbleibender Position zum Video angeordnet werden.
Das ginge nur, wenn Du ihm eine eigene ID zuweist und ihn dann parallel mit dem Video aufrufst. Dazu müsstest Du die Zuweisungen ergänzen, die mit einem Klick auf einen Link Button aktiviert werden.
Alternativ könntest Du den Button seitlich von den Videos anordnen und ihn da fixieren. Damit bleibt er dann auch beim Scrollen der Seite im Blick...

Edit 20:42 h
Das Missverständnis mit der Namensvergabe für die popup Ebene "vid_pu (lock)" ist schnell geklärt wenn man berücksichtigt, dass der in der Seiten- & Ebenen-Galerie sichtbare Name nicht unbedingt die ID der Objekte in der Ebene repräsentiert.
In unserem Beispiel wird die ID explizit mit dem Namen vergeben, den wir, wie beschrieben, der Gruppe gegeben haben.
Im Quellcode ist das gut zu sehen. Hier ist der Name "popup" die ID für die in der Gruppe zusammengefassten Objekte, die damit zu einem "img" (Bild) werden.


Das erklärt auch, warum das ehemals selbständige iframe in der Gruppe nicht funktionieren kann.

Zuletzt geändert von BeRo am 03.02.2021, 20:42, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

Paul_W. schrieb am 03.02.2021 um 23:09 Uhr

Das es mit dem Vermischen der verschiedenen Funktionen nicht läuft, dachte ich mir schon. Die Hoffnung...

Danke für den Vorschlag, der direkt morgen ausprobiert wird.