Bilder in iframe anzeigen lassen und zentrieren

rernanded

Erfahrenes Mitglied
Hallo
wenn ich Bilder in einem iframe anzeigen lasse dann werden die immer oben links in der Ecke angezeigt.
Ich will aber das sie zentriert angezeigt werden und zwar horizontal und wenn möglich auch vertikal.

Möglich mit css oder besser mit js?

Das habe ich per js versucht, klappt aber nicht.

HTML:
<script>
document.querySelector('iframe[name="iframe"]').contentWindow.addEventListener('load',function(e){e.target.body.style.textAlign='center'},true);
</script>

echo '<div style="position: absolute; top: 3%; left: 33%;"><iframe name="iframe" srcdoc="Bildergalerie (Bitte in der Liste links jeweils das gewünschte Bild auswählen und anklicken!)" style="display: block; margin: 0 auto; text-align: center; background: white; border: solid 0px #000; height: 654px; width: 654px;"></iframe></div>';

Moni
 

Sempervivum

Erfahrenes Mitglied
Das Problem ist, dass das Javascript ausgeführt wird, bevor der iFrame erzeugt wird. Die Console zeigt das auch an: "Uncaught TypeError: Cannot read property 'contentWindow' of null"
Vertausche ich die Reihenfolge, funktioniert es.
 

Sempervivum

Erfahrenes Mitglied
In einer Testseite bei mir hat es funktioniert. Allerdings war da nicht viel Luft zum Zentrieren, so dass ich es mir ganz genau im HTML-Inspektor ansehen musste, um den Effekt zu erkennen.

Wenn Du es online hast, dann poste doch die URL.

Und warum willst Du das so kompliziert machen mit einem iFrame?
 

Sempervivum

Erfahrenes Mitglied
Wie würdest Du es denn machen?
Um die Frage zu beantworten, müsste man genau wissen, was die Absicht bei diesem Vorgehen ist und was man damit erreichen will. Der Inhalt des iFrames, den Du gepostet hast, ist ja wahrscheinlich nicht alles, denn dort ist von einer Bildergalerie die Rede.
 

rernanded

Erfahrenes Mitglied
Hier das vollständige Script.
MONI
PHP:
<!DOCTYPE html>
<html>
<head>
<script>
document.querySelector('iframe[name="iframe"]').contentWindow.addEventListener('load',function(e){e.target.body.style.textAlign='center'},true);
</script>
</head>
<body>
<?php

$dateiendungen = ["gif","jpg","png"]; // Dateiendungen
$bilder = alleBilder("images", $dateiendungen); // Verzeichnis
$dateien = $verzeichnisse = 0;
$ausgabe = '';

function alleBilder($verzeichnis, $dateiendungen) {
 $dateien = [];
 $elemente = glob($verzeichnis . '*', GLOB_MARK | GLOB_SORT); // alternativ: GLOB_NOSORT

 foreach ($elemente as $element) {

  if (substr($element, -1) != DIRECTORY_SEPARATOR) {
   $dateiendung = explode(".", $element);

   if (count($dateiendung) == 2 &&
       in_array($dateiendung[1], $dateiendungen)) {
    $dateien[] = $element;
   }
  }
  else {
   $dateien[] = $element;
   $dateien = array_merge($dateien, alleBilder($element, $dateiendungen));
  }
 }
 return $dateien;
}

foreach ($bilder as $bild) {

 if (substr($bild, -1, 1) == DIRECTORY_SEPARATOR) {
  $ausgabe .= '&#128447; <samp>' . $bild . '</samp><br>';
  $verzeichnisse++;
 }
 else {
  $ausgabe .= '&emsp;&#128446; <a href="' . $bild . '" target="iframe">' . basename($bild) . '</a><br>';
  $dateien++;
 }
}

echo '<div style="position: absolute; top: 3%; left: 3%;"><p>&bull; Bilder: <strong>' .  $dateien . '</strong><br />
&bull; Verzeichnisse: <strong>' . $verzeichnisse . '</strong></p>' . $ausgabe . '</div>';

echo '<div style="position: absolute; top: 3%; left: 33%;"><iframe name="iframe" srcdoc="Bildergalerie (Bitte in der Liste links jeweils das gewünschte Bild auswählen und anklicken!)" style="display: block; margin: 0 auto; text-align: center; background: white; border: solid 0px #000; height: 654px; width: 654px;"></iframe></div>';

?>
</body>
</html>
 

Sempervivum

Erfahrenes Mitglied
OK, damit wird das Ganze jetzt klarer: Die Bilder aus der Galerie werden in diesem iFrame angezeigt. Und Du willst vermutlich das Bild, das gerade drin ist, zentrieren. Ich werde mir das ansehen ...
 

Sempervivum

Erfahrenes Mitglied
OK, ich habe das jetzt in einer Testdatei und es sieht bei mir so aus:
gallery-iframe.jpg

Ist das denn überhaupt, was Du mit diesem Code erreichen willst?

Auf jeden Fall ist es so, dass man dazu keinen iFrame braucht, man kann genau so gut einen div-Container oder ein figure-Tag mit einem img-Tag darin verwenden und dessen src-Tag austauschen. Dann wäre es auch kein Problem, das Ganze responsiv zu machen.

Nimmt man es jedoch so, wie es ist, mit iFrame, wäre die erste Aufgabe, das Bild dort einzupassen, so dass es ohne Scrollbalken angezeigt wird. Dazu eignet sich object-fit.
 

rernanded

Erfahrenes Mitglied
Ja ist eine Idee. Schick mir doch bitte mal deine Lösung wie Du es mit der Zentrierung gemacht hast. MONI