JavaScript Array

[Rolf B]

Hallo T-Rex,

ja, das ist auf jeden Fall eine bessere Idee als document.write. HTML mit document.write zu erzeugen ist etwas, das man dem Browser nicht antun sollte, es bringt die ganze Ladeoptimierung der Seite durcheinander.

Wenn man mit JavaScript-Strukturen arbeitet, sollte man die Bilder mit document.createElement("img") erzeugen und mit append an den Galeriecontainer anhängen. Aber das HTML direkt zu schreiben ist einfacher.

Es sei denn, man bekommt dieses Array irgendwoher geliefert und hat die Aufgabe, daraus HTML zu machen. An der Stelle fragt der Client-Server Entwickler dann gleich: Wird das HTML aus PHP erzeugt? Kann man das Bilder-Array schon im PHP als HTML aufbereiten?

Die div-Elemente mit einem für div undefinierten href-Attribut kapiere ich übrigens nicht. Lauert da etwa ein click-Handler im Hintergrund, der auf diese Weise die divs „interaktiv“ zu machen sucht? Wenn ja: bitte zur Kur nach Bad Idea fahren!

Es bietet sich auch an, als Galeriecontainer eine LISTE zu verwenden, um die Zugänglichkeit der Galerie zu verbessern. Das HTML sollte im Minimalfall so aussehen:

<ul id="galerie">
  <li><a href="..."><img src"..." alt="..."></a></li>
  .
  .
  .
  <li><a href="..."><img src"..." alt="..."></a></li>
</ul>

Diese Galerie kann man mit einer Flexbox und flex-flow: row wrap visuell aufbereiten. Die Listenpunkte und die Standard-Paddings und -Margins von ul oder li muss man im Stylesheet entfernen (list-style:none;).

Für das Mischen shuffelt man die li-Elemente in der Liste, der Rest folgt.

Ein besseres HTML würde nicht <img> in die Links setzen, sondern eine <figure> mit <figcaption>-Element. Auch da wird man ggf. die vom Browser gelieferten margins oder paddings entfernen müssen.

Das shuffling ist ein Vierzeiler (der zum oben gezeigten HTML passt und bei anderem HTML natürlich angepasst werden muss). jQuery? Pffft…

<script type="module">
  const gallery = document.getElementById("galerie"),
        gallerySize = gallery.childElementCount;

  for (let i=0; i<gallerySize; i++) {
    const shufflee = (Math.random() * gallerySize) >> 0;
    gallery.append(gallery.children[shufflee]);
  }
</script>

Die Angabe type="module" erzwingt eine Ausführung, nachdem das HTML fertig geparsed ist und erspart einen DOMContentLoaded-Eventhandler oder den Einsatz von jQuery, um einen Ready-Handler zu bauen. Es erzwingt auch den strict mode und isoliert die Variablen gallery und gallerySize in diesem Script.

Das Script hantiert mit der children-NodeList des Galeriecontainers herum. Das ist natürlich nur sinnvoll, wenn das ul Element ausschließlich li Elemente enthält und diese auch alle am shuffling teilnehmen sollen.

Rolf