Sempervivum
Erfahrenes Mitglied
Welches meinst Du jetzt, die Alternative mit div bzw. figure oder das Bild im iFrame zu zentrieren?
Follow along with the video below to see how to install our site as a web app on your home screen.
Anmerkung: This feature currently requires accessing the site using the built-in Safari browser.
<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>
<!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>
<!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>
<!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>