Bilder in iframe anzeigen lassen und zentrieren

Erst mal die Lösung zum iframe, die will ich jetzt aber unbedingt noch sehen. ;-)))
Beim div oder figure kannst Du ja den Weg andeuten wo ich was ändern muß oder es ganz anders machen muß. Dann werde ich es erst mal wieder selbst probieren bis ich wieder hier aufschlage.
 
Die hatte ich noch gar nicht fertig und die ist auch gar nicht so einfach. Ich hatte es zunächst so versucht:
Code: 
<script>
    document.querySelector('iframe[name="iframe"]').contentWindow
        .addEventListener('load',function(e){
            const theStyle = `
                <style>
                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                </style>`;
            e.target.head.insertAdjacentHTML('beforeend', theStyle);
        }, true);
</script>
aber das wird leider wieder zerstört, sobald man das Bild mit einem Link und target in den iFrame schreibt. Könnte man sicher auch noch irgend wie beheben aber ich sehe keinen Nutzen darin, dies Lösung mit iFrame ist irgend wie Murks. Besser mit einem figure-Tag.
 
Was den Container mit div oder figure betrifft: In diesen Container fest ein img-Tag mit einer geeigneten ID legen. Einen Eventlistener für Klick auf den Link registrieren. Die URL des Bildes findest Du dann unter event.target.href. Diese dem src-Attribut des Bildes zuweisen. Und dann das CSS für das Bild wir in #13.
 
So habe mal den Code umgeschrieben, nur wo muß ich den eventlistener einbauen? Ich bin leider etwas müde. Müsste sonst in der Nacht probieren wie ich es hinkriege. Bis hierhin danke Dir. MONI
PHP: 
<!DOCTYPE html>
<html>
<head>
<style>
                    #figure {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
</style>
<script>

</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 .= 'Verzeichnis: <strong>' . $bild . '</strong><br />';
  $verzeichnisse++;
 }
 else {
  $ausgabe .= '<a href="' . $bild . '">' . basename($bild) . '</a><br />';
  $dateien++;
 }
}

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

echo '<div style="position: absolute; top: 3%; left: 33%;"><figure id="figure"><img src="" id="imageinfigure"><figcaption></figcaption></figure></div>';

?>
</body>
</html>
 
Zuletzt bearbeitet:
Ich vergaß zu erwähnen: Sortierung is Default bei glob, eine Option GLOB_SORT gibt es nicht.
Das figure-Tag ist rein statisch und kann ohne PHP angelegt werden.
Besser das figure-Tag ohne feste Größe responsiv anlegen und mit Flexlayout anordnen.

Beim Eventlistener kann man vorteilhaft vom Eventbubbling Gebrauch machen, siehe Kommentare:
Code: 
<!DOCTYPE html>
<html>
<head>
<style>
    body {
        display: flex;
        align-items: flex-start;
    }
    #bilderliste, figure {
        margin: 0;
        padding: 10px;
    }
    #bilderliste {
        flex: 0 0 auto;
    }
    figure {
        flex: 1;
    }
    figure img {
        width: 100%;
        height: 100%;
        /* object-fit: contain; */
        min-width: 1px;
    }
</style>
<script>

</script>
</head>
<body>
<?php

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

function alleBilder($verzeichnis, $dateiendungen)
{
    $dateien = [];
    $elemente = glob($verzeichnis . '*', GLOB_MARK); // 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 .= 'Verzeichnis: <strong>' . $bild . '</strong><br />';
        $verzeichnisse++;
    } else {
        $ausgabe .= '<a href="' . $bild . '">' . basename($bild) . '</a><br />';
        $dateien++;
    }
}

echo '<div id="bilderliste"><p>Bilder: <strong>' . $dateien . '</strong><br />
Verzeichnisse: <strong>' . $verzeichnisse . '</strong></p>' . $ausgabe . '</div>';
?>

<figure><img id="imageinfigure"></figure>

<script>
    const theImg = document.getElementById('imageinfigure');
    // Wir registrieren einen Eventlistener fuer den Container mit den Links auf die Bilder.
    // Wird ein Link geklickt, steigt das Event im Baum aufwaerts und kommt beim
    // Container an. Um sicher zu gehen, dass das geklickte Element der Link ist,
    // pruefen wir, ob es ein href-Attribut hat.
    document.getElementById ('bilderliste').addEventListener('click', event => {
        if (event.target.href) {
            // Wir unterdruecken die Defaultaktion fuer den Link weil wir ja nicht
            // wollen, dass eine neue Seite mit dem Bild aufgerufen wird:
            event.preventDefault();
            // Das href-Attribut ist die URL des Bildes. Wir weisen sie dem src-Attribut
            // des img im figure-Tag zu:
            theImg.src = event.target.href;
        }
    });
</script>
</body>
</html>
 
Super, schönen Dank. Es war doch mehr an Umbau als ich dachte.
>>>event.preventDefault();<<< hatte ich überhaupt nicht auf dem Schirm.
MONI
 
Ich hab noch eine andere Lösung. Und was meinst Du, brauchbar? MONI
PHP: 
<!DOCTYPE html>
<html>
<head>

<style>
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial;
}

.container {
  position: relative;
  display: none;
 }

#expandedImg {
/* expands img to the percentage width of the display */
width: 50%;
}

</style>

</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 .= 'Verzeichnis: <strong>' . $bild . '</strong><br />';
  $verzeichnisse++;
 }
 else {
  $ausgabe .= '<img style="width: 60px; height: auto" src="images/' . basename($bild) . '" onclick="myFunction(this);"><br />';
  $dateien++;
 }
}

?>
<div>
<?php
echo $ausgabe;
?>
</div>

<div class="container">
  <img id="expandedImg">
  <div id="imgtext"></div>
</div>

<script>
function myFunction(imgs) {
  var expandImg = document.getElementById("expandedImg");
  var imgText = document.getElementById("imgtext");
  expandImg.src = imgs.src;
  imgText.innerHTML = imgs.alt;
  expandImg.parentElement.style.display = "block";
}
</script>

</body>
</html>
 
Zuletzt bearbeitet:
Ja, so wird es natürlich auch funktionieren. Was das HTML angeht, wäre aber auch hier ein figure-Tag mit caption angebracht. Auch einen Beschreibungstext anzuzeigen ist eigentlich eine gute Idee aber wo soll der her kommen? Du liest ihn aus dem alt-Attribut aus aber ich kann nirgends finden, dass dieses gesetzt wird. Das ist ein generelles Problem wenn man die Dateinamen automatisch ermittelt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück