Seite 1 von 1

Iframe src Wechsel für responsiv [gelöst]

Verfasst: 18.07.2020 11:25
von TITO0815
Hallo,

hoffe der Titel passt so.
Worum gehts?

auf unserer Seite haben wir ein paar Werbepartner, die gern ein paar Werbebanner laufen lassen möchten.
Für diese Zweck habe ich ein kleines php Bannerrotationsskript erarbeitet.
Ok, eher eine Kombi aus mehreren kleinen.

1 html gibt
1. ein Uploadtool für das Hochladen der Bilder
2. eine Textarea für das bearbeiten einer quotefile.txt
3. eine "Gallerieansicht der hochgeladenen Bilder

Die quotefile dient zur Rotation der hinterlegten Banner.

Kurze Rede garkein Sinn, es funktioniert einfach.

Jetzt zum "Problem"

Wir haben dadurch 3 verschiedene php Datein für 3 unterschiedliche Bannergrößen (728px, 468px und 234px)
Diese werden per iframe im entsprechenden Bereich angezeigt.

Durch die vermehrte Nutzung von mobilegeräten ist uns aufgefallen, dass die iframes bei geringer maxwidth abgeschnitten werden.

Gibt es eine möglichkeit den iframe so zu definieren, dass je nach maximaler Breite des Browserfensters der entsprechende Inhalt angezeigt wird?

Seite: https://pbhub.de (468er Banner)
Forum: https://pbhub.de/forum/ (728er Banner)

Habe schon etwas rumprobiert, es aber irgendwie nicht hinbekommen.
Jemand eine Idee?

Danke

Re: Iframe src Wechsel für responsiv

Verfasst: 18.07.2020 14:50
von Cowboy of Bottrop
Ich verwende diese Ext, um Werbebanner zu verwalten:
https://www.phpbb.com/customise/db/extension/ads

Vielleicht hilft dir das weiter.

Re: Iframe src Wechsel für responsiv

Verfasst: 19.07.2020 15:43
von TITO0815
Hallo.

Danke für die Antwort. Die ext hatte ich auch. War mir aber nix. Und auch dort leider keine automatische Anpassung der Bannergröße.

Mit Bildern so schaffe ich es. Also egal ob via <style> @screen max wider usw. Oder als <Source Image = max width.

Aber mit dem Wechsel der iframequelle will es nicht klappen.

Re: Iframe src Wechsel für responsiv

Verfasst: 19.07.2020 17:14
von Cowboy of Bottrop
Und wenn du die Bilder direkt einbindest, nicht als iFrame? Dann könntest du doch statt des Frames einen div benutzen und den bzw. das Bild in diesem Container im CSS referenzieren.

Re: Iframe src Wechsel für responsiv

Verfasst: 19.07.2020 21:08
von TITO0815
Dann hab ich aber leider keine rotation der Banner inkl dazugehöriger Links. Bzw ja könnte man. Dann jede Woche den Code ändern. Bzw die php umschreiben.

Re: Iframe src Wechsel für responsiv

Verfasst: 19.07.2020 21:16
von Cowboy of Bottrop
OK. Mit einem iFrame geht es jedenfalls nicht, dass deine Banner responsive sind. Du kannst zwar die Größe des Frames vorgeben, der darin gezeigte Inhalt stammt von einer anderen Seite, die auch das Aussehen und die Größe bestimmt.

Zudem, wenn du Inhalte einer Seite einbinden willst, die möglicherweise ein Framebreaker-Script einsetzt, hast du eh ein Problem. ;)

Re: Iframe src Wechsel für responsiv

Verfasst: 19.07.2020 22:14
von TITO0815
Habs gelöst was im Grunde recht simpel war.
Zwar nicht wirklich "schick" als Lösung, aber funktionell.

Code: Alles auswählen

<html> 
 <head>
    <style>

.werbung_234 {

   align: center;

}

.werbung_468 {

   align: center;

}

.werbung_728 {

   align: center;

}

@media only screen and (max-width: 520px) {
.werbung_234 {
    
  }
.werbung_468 {
    display: none;
  }
.werbung_728 {
    display: none;
  }
}

@media only screen and (min-width: 521px) and (max-width: 820px) {
.werbung_234 {
    display: none;
  }
.werbung_468 {
    
  }
.werbung_728 {
    display: none;
  }
}

@media only screen and (min-width: 821px) {
.werbung_234 {
    display: none;
  }
.werbung_468 {
    display: none;
  }
.werbung_728 {
    
  }
}
    </style>
  </head>


<div class="werbung_728">
<iframe align="center" src="/meinordner728/banner.php" width="100%" height="110" name="Sponsor Banner"></iframe>
</div>
<div class="werbung_468">
<iframe align="center"  src="/meinordner468/banner.php" width="100%" height="80" name="Sponsor Banner"></iframe>
</div>
<div class="werbung_234">
<iframe align="center"  src="/meinordner234/banner.php" width="100%" height="110" name="Sponsor Banner"></iframe>
</div>

</html>