Frage zum Wiki-Artikel „iframe“

[Rolf B]

Hallo HP,

ich habe das Problem mittlerweile gelöst - mit Javascript und PHP

Oh je. Da hast Du noch eine lange und steile Lernkurve vor Dir.

Lass dein HTML mal über einen HTML Validator laufen. Da sind unpaarige Anführungszeichen, und ein <link> Element zum Laden eines Stylesheets gehört nicht nach <style></style> hinein. Innerhalb von <style></style> stehen nur CSS Regeln. Das kann ein Grund sein, warum dein CSS nicht gewirkt hat. Wobei ich dein mystyle.css auch nicht recht verstehe. Für jedes Vollbild eigene Style-Regeln haben zu wollen, huh, das ist umständlich. Das erschwert eine generische Lösung etwas.

Lerne Flexbox und Grid kennen. Tables zum Seitenlayout sind seit über 10 Jahren ein Anti-Pattern. Bei Grid muss man im Internet Explorer etwas aufpassen - sofern man den noch beachten will - Flexbox ist überhaupt kein Problem.

Deine CSS Probleme mit dem iframe können auch am Table-Layout liegen. Wenn Du nur den iframe gestyled hast, passiert nichts. Die Table muss ebenfalls width:100% bekommen. Und schon ist der Fall erledigt. Hättest Du, wie erbeten, vorher mal deine Seite präsentiert, dann hätte man sich das anschauen können.

Eine CSS Angabe "align:center" gibt es nicht. Es gibt ein Attribut align am table Element, dem Du "center" geben kannst. Die Zentrierung einer Table in ihrem Elternelement (z.B. dem body) per CSS geht mit margin:auto.

Statt der Einzellen-Table (was nützt das überhaupt?) mit dem iframe wäre generell ein nav Element mit einer Thumbnail-Liste darin sinnvoller. Das PHP dazu kannst Du includen, falls Du die Galerie anderswo wiederverwenden willst.

<nav class="galerie">
  <ul>
    <li>
      <a href="/galerie.php?bild=1" data-bild="1">
        <img src="thumbnails/01roczeich.jpg" alt="Das Wort singt die Welt">
      </a>
    </li>
    <li>
      <a href="/galerie.php?bild=2" data-bild="2">
        <img src="thumbnails/02samkh3.jpg" alt="Samkhya-Yoga Buch">
      </a>
    </li>
    ...
  </ul>
</nav>

Die data-Attribute braucht man für die einfachere JavaScript-Unterstützung der Galerie, ansonsten sind sie unnötig.

Als CSS nimmst Du

.galerie {
   width: 90vw;          /* schmaler Bildschirm: 90% der Breite */
   max-width: 80em;      /* zu breiter Bildschirm: auf 80em limitieren */
   margin: auto;
}

.galerie ul {
   width: 100%;
   height: 7em;   /* zum Beispiel */
   display:flex;
   overflow-x:scroll;
   list-style: none;
}

.galerie img {
   border: 3px solid yellow;
   height: 6em;
}

Größenangaben in em beziehen sich auf den Font, der an dieser Stelle gilt. Bei einem Font mit font-size:16px ist 1em = 16px. Wählt der User eine Vergrößerung im Browser aus, ändert der Browser die Fontsize. Alles, was in em angegeben ist, skaliert dann mit. So macht man das heute.

Die Flexbox sorgt dafür, dass die Listenelemente alle nebeneinander kommen. Mit overflow-x:scroll wird das alles horizontal scrollbar.

HTML und CSS sind jetzt aus der Hüfte geschossen und nicht ausprobiert. Vielleicht muss man noch etwas daran herumzupfen.

Die li Zeilen generierst Du im PHP aus deiner DB. galerie.php entspricht deinen jetztigen Pages, aber statt der hartcodierten Bildnummer nimmst Du sie aus $_GET["bild"].

Natürlich löst auch dieses Design nach einem Klick einen Rücksprung der Thumbnail-Liste auf Position 1 aus. Den kannst Du aber nicht wirklich verhindern. Man könnte alle Vollbilder übereinander auf die Seite legen und mittels :target Selektor im CSS dafür sorgen, dass nur das gerade ausgewählte Bild sichtbar ist. Das löst aber eine Datenflut aus, weil einige Browser dann sämtliche Bilder vorab laden könnten. Besser ist da eine JS Lösung.

Man fügt dafür der Galerie einen click-Handler hinzu, der click-Events auf die a Elemente abfängt und das Bild austauscht.

document.querySelector(".galerie").addEventListener("click", function(clickEvent) {
   if (!clickEvent.target.href) return;        // Kein Klick auf ein a Element
   let bild = clickEvent.target.dataset.bild;  // Liest data-bild aus dem a-Element

   // Hier das Vollbild aktualisieren

   clickEvent.preventDefault();                // Verhindern, dass der Browser dem Link folgt.
});

Das ist erstmal nur das Grundgerüst, das Klicks auf a Elemente in der Galerie erkennt und die Bildnummer ausliest. Statt data-bild könnte man auch das href-Attribut des Links auslesen und die Bildnummer herausinterpretieren - aber mit dem dataset ist es doch deutlich einfacher. Allerdings erst ab Internet Explorer 11 - wenn Du ältere IE unterstützen willst, nimm statt dataset.bild lieber getAttribute("data-bild").

Wie dieses Script an die Daten für das Vollbild kommt (URL und Meta-Informationen), das kann man unterschiedlich gestalten. Entweder mit einem AJAX-Aufruf, der die Daten oder ein HTML Fragment für das Vollbild liefert, oder du codierst die Informationen in data-Attributen der Galerie-Links, oder Du generierst im PHP ein Stück Script, das diese Daten enthält. Geht alles. Wo willst Du hin?

Rolf