nicht angemeldet
Liebe Verena,
Code wäre als echter Text hier viel schöner, als aus einem Bild abtippen zu müssen, um dann zitieren zu können.
Du willst Bilder in einer zufälligen Reihenfolge anzeigen? Dann wäre die vernünftigste Lösung so, wie @T-Rex es vorschlug, die Bilder im HTML regulär auszuliefern.
<div id="gallery">
<img alt="Hund mit Knochen" src="images/referenzen/spenglerei-muenchen-1.png">
<img alt="Hund mit Knochen" src="images/referenzen/spenglerei-muenchen-2.png">
<img alt="Hund mit Knochen" src="images/referenzen/spenglerei-muenchen-3.png">
<!-- ... und noch Bilder 4 - 9 ... -->
</div>
Dem <div> habe ich absichtlich eine ID gegeben, denn dann kann man das mit JavaScript-Bordmitteln sehr gut erreichen. Die Bilder darin kann man dann gut in einem Array verwalten:
document.addEventListener("DOMContentLoaded", function () {
// wo ist die Galerie?
const gallery = document.getElementById("gallery");
// keine Galerie gefunden?
if (!gallery) {
return;
}
const images = Array.from( // Array.from macht daraus ein Array:
gallery.getElementsByTagName("img")
);
// keine Bilder in der Galerie?
if (!images.length) {
return;
}
images.shuffle(); // Bilderliste vermischen
// jedes Bild ans Ende der Galerie anhängen (hängt es effektiv um)
images.forEach(function (img) {
gallery.appendChild(img);
});
// modernere Schreibweise für das Umhängen
images.forEach(img => gallery.appendChild(img));
});
Das JavaScript ist ungetestet! Es wird im <head>-Element der Seite in einem <script>-Element notiert und legt erst dann los, wenn die Seite das Dokument vollständig aufgebaut hat:
<head>
...
<title>... wasauchimmer ...</title>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function () {
// hier das Script
});
</script>
</head>
Liebe Grüße
Felix Riesterer
Tabellenkalk
Gunnar Bittersmann
JürgenB
Rolf B
Der Martin