Kontakt Impressum Datenschutz
Web 4.0 Art

web40art.com


AI - Comic - SciFi - Web 4.0 - Art
 

Javascript Bilderreihen im Artikel

 

Manchmal möchte man in einem Artikel mehrere Bilder nicht nur neben- oder untereinander anordenen, sondern per Link anklicken. Dazu gibt es in WordPress die Möglichkeit, im Artikel eine Galerie anzulegen, entweder mit Hilfe der Mediathek oder mit einem Plugin. Es geht aber auch ganz einfach mit ein paar Zeilen Javascript, wenn man...

  • ...keine besonderen Effekte benötigt, wie z.B. Ein- und Ausblenden,
  • ...den Beitragseditor ausschließlich im HTML-Modus verwendet,
  • ...über einige Grundkenntnisse in HTML/CSS verfügt,...

Ein "Vor"- und "Zurück"-Link ist in dieser einfachen Bildergalerie auch nicht vorhanden. Es ist also nur ein "Anklicken" möglich, aber kein "Weiterklicken".

Hier ein Beispiel:

Kreise

Zuerst wird das Startbild eingefügt, das ebenfalls dem ersten Link zugeordnet wird. Jedes weitere Bild wird einem weiteren Link zugeordnet. Die Anzahl der Links entspricht dann der Anzahl der Bilder. Drei Links, wie in diesem Beispiel, entsprechen dann drei Bildern. Vier oder mehr Links würden dann vier oder mehreren Bilder entsprechen.

Es können auch mehr als nur eine Galerie in den Artikel eingefügt werden. Der Javascript-Code braucht jedoch nur einmal eingefügt werden, denn jede Galerie hat einen eigenen Namen, der jeweils im "name"-Attribut des "img-Tags" für das jeweilige Startbild hinzugefügt wird. Die Namen der Galerien sind frei wählbar. So hat in diesem Beispiel die erste Galerie den Namen "Formen" und die zweite Galerie den Namen "A-Z".

Sterne

Sterne    Herzen    Konfetti    Stücke

Hier der dazugehörigeJavascript-Code, der in eine einfachen HTML-Datei eingefügt ist:

<!DOCTYPE html>
<html lang="de">
 
    <head>
        <meta charset="utf-8">
        <title>...</title>
        <script type="text/javascript">
           function gallery01(galid,imgurl){document.images[galid].src=imgurl;}
        </script>
    </head>
 
    <body>
      
        <p><strong>Hier ein Beispiel:</strong></p>
      
        <img id="Formen" src="img/a001.png" width="400" height="300" alt="Kreise" />
      
        <p>
        <a href="javascript:gallery01('Formen','img/a001.png')" alt="Kreise">Kreise</a>&nbsp;
        <a href="javascript:gallery01('Formen','img/a002.png')" alt="Quadrate">Quadrate</a>&nbsp;
        <a href="javascript:gallery01('Formen','img/a003.png')" alt="Dreiecke">Dreiecke</a>
        </p>
      
        <p>...und hier eine weitere Galerie...</p>

        <img id="A-Z" src="img/b001.png" width="400" height="300" alt="Sterne" />

        <p>
        <a href="javascript:gallery01('A-Z','img/b001.png')" alt="Sterne">Sterne</a>&nbsp;
        <a href="javascript:gallery01('A-Z','img/b002.png')" alt="Herzen">Herzen</a>&nbsp;
        <a href="javascript:gallery01('A-Z','img/b003.png')" alt="Konfetti">Konfetti</a>&nbsp;
        <a href="javascript:gallery01('A-Z','img/b004.png')" alt="Stücke">Stücke</a>
        </p>
      
    </body>
 
</html>

Die Bild-URL muss natürlich entsprechend angepasst werden, also statt "img/b001.png" beispielsweise "http://www.example.com/img/b001.png".