Bilderreihen im Artikel

Javascript-Tutorial Inhalt »

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".

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".

Der Javascript-Code sollte möglichst im Footer-Bereich eingefügt werden. Das erhöht die Performance der Webseite. Da der Code nicht in jedem Artikel benötigt wird, sondern eben nur dort, wo auch eine Galerie eingefügt werden soll, könnten "benutzerdefinierte Felder" verwendet werden. Der Javascript-Code ist dann der Wert des Feldes und erscheint nur dann (z.B. im "Footer"), wenn das Feld für den betreffenden Artikel hinzugefügt wurde.

Die Bild-Links ändern beim Überfahren mit dem Mauszeiger ihre Rahmenfarbe. Das hat jedoch nichts mit Javascript zu tun, sondern wird mit der CSS-Anweisung "a:hover{...}" erreicht. Auch, dass die Links ihre rote Rahmenfarbe behalten, wenn sie angeklickt wurden, ist pures CSS und wird mit "a:focus{...}" erreicht, wobei "focus" vor "hover" im CSS-Bereich notiert werden sollte. Die Reihenfolge dieser Pseudoelemente ist also wichtig!

 

Galerien / Präsentationen...

city001-sidebar

link-icon002 Galerien-Übersicht...

Kategorien

Alle Artikel

(Inhaltsverzeichnis)

link-icon002 alphabetisch geordnet...

link-icon002 nach Datum geordnet...

soziale Netzwerke...

"Cogniclip" ist auch auf folgenden sozialen Netzwerken vertreten:

Cogniclip auf Twitter Cogniclip auf Google+
 

Per RSS Beiträge abonnieren:

RSS-Feed von Cogniclip
 

Kalender

Juli 2017
M D M D F S S
« Feb    
 12
3456789
10111213141516
17181920212223
24252627282930
31