1. Snippets
  2. ›
  3. CSS
  4. ›
  5. Wie kann man eine einfache CSS-Galerie ohne JavaScript erstellen

Wie kann man eine einfache CSS-Galerie ohne JavaScript erstellen

Es stellt sich heraus, dass es durchaus möglich ist, eine einfache CSS-Galerie ohne Javascript zu erstellen. In diesem Artikel werden wir Ihnen zeigen, wie Sie das nur mit HTML und CSS machen können.

Wie kann man eine einfache CSS-Galerie mit HTML erstellen

Wie wir wissen, besteht die Galerie aus 2 Blöcken von Bildern. Das erste enthält kleine Bilder (Thumbnails), das andere große Bilder. Wenn Sie eine einfache Galerie erstellen möchten, müssen Sie nur eindeutige Anker definieren (Bild1, Bild2, Bild3, Bild4, Bild5).

Der Code muss wie folgt aussehen:

<div id="gallery">
      <ul id="navigation">
        <li>
          <a href="#picture1">
          <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
          <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
          <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
          <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
          </a>
        </li>
      </ul>
      <div id="full-picture">
        <div>
          <a name="picture1"></a>
          <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
        </div>
      </div>
    </div>

2. Wie kann man eine einfache CSS-Galerie mit CSS erstellen

Sie können eine CSS-Galerie ganz einfach mit nur CSS erstellen, indem Sie diesen Schritten folgen:

  • Stellen Sie die Breite des Blocks von großen Bildern entsprechend der Breite eines der großen Bilder ein.
  • Definieren Sie die CSS-Eigenschaft overflowmit dem Wert “hidden” für den Block von großen Bildern.
  • Platzieren Sie die Bilder mit Ankergliedern in diesem Block.
  • Geben Sie die Links zu den kleinen Bildern mit den entsprechenden Ankern an, die sie mit großen Bildern verknüpfen.

In diesem letzten Schritt, wenn Sie auf ein kleines Bild klicken, wird es zu dem entsprechenden großen Bild im Block der großen Bilder gescrollt.

Der Code wird so aussehen:

#gallery {
      width: 600px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin: 100px auto;
      border: 2px solid #003C72;
      }
      #navigation {
      list-style: none;
      padding: 0;
      margin: 0;
      display:flex;
      justify-content: space-between;
      }
      #navigation li {
      padding: 0;
      margin: 0;
      margin:5px 0 20px;
      }
      #navigation li a img {
      display: block;
      border: none;
      }
      #navigation li a {
      display: block;
      }
      #full-picture {
      width: 600px;
      height: 375px;
      overflow: hidden;
      float: left;}
      #full-picture img{
      width:100%;
      }

Jetzt ist unsere Galerie erstellt! Lassen Sie uns den vollständigen Code anzeigen:

Beispiel

<!DOCTYPE html>
<html>
  <title>Der Titel des Dokuments</title>
  <head>
    <style>
      #gallery {
      width: 600px;
      overflow: hidden;
      position: relative;
      z-index: 1;
      margin: 100px auto;
      border: 2px solid #003C72;
      }
      #navigation {
      list-style: none;
      padding: 0;
      margin: 0;
      display:flex;
      justify-content: space-between;
      }
      #navigation li {
      padding: 0;
      margin: 0;
      margin:5px 0 20px;
      }
      #navigation li a img {
      display: block;
      border: none;
      }
      #navigation li a {
      display: block;
      }
      #full-picture {
      width: 600px;
      height: 375px;
      overflow: hidden;
      float: left;}
      #full-picture img{
      width:100%;
      }
    </style>
  </head>
  <body>
    <div id="gallery">
      <ul id="navigation">
        <li>
          <a href="#picture1">
          <img alt="small house 1" src="/uploads/media/default/0001/03/22586f08ef509e3fd151d7a923f7f2c5997f0b07.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture2">
          <img alt="small house 2" src="/uploads/media/default/0001/03/103116629234462f05410cb6d43ed08065e3d4de.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture3">
          <img alt="small house 3" src="/uploads/media/default/0001/03/3d9718da65fc51d97aac4c6d762af5439cf91502.jpeg" />
          </a>
        </li>
        <li>
          <a href="#picture4">
          <img alt="small house 4" src="/uploads/media/default/0001/03/3eb4eb89e69c353ce1305a2c545aa1d08f811952.jpeg" />
          </a>
        </li>
      </ul>
      <div id="full-picture">
        <div>
          <a name="picture1"></a>
          <img alt="Large house 1" src="/uploads/media/default/0001/03/0fa4b71d43929b2df12e076e56c1977be75dfbb8.jpeg" />
        </div>
        <div>
          <a name="picture2"></a>
          <img alt="Large house 2" src="/uploads/media/default/0001/03/825a2070e85851f240a3e3159ce14a209ec09ef4.jpeg" />
        </div>
        <div>
          <a name="picture3"></a>
          <img alt="Large house 3" src="/uploads/media/default/0001/03/50e11aad0765f04983e42cb992fbda3ba39322f5.jpeg" />
        </div>
        <div>
          <a name="picture4"></a>
          <img alt="Large house 4" src="/uploads/media/default/0001/03/efcd4eae59c19e488249be1872a3aca00d81d545.jpeg" />
        </div>
      </div>
    </div>
  </body>
</html>
Wenn Sie einen Bild-Slider oder eine Diashow erstellen möchten, finden Sie alle nützlichen Informationen hier.
Finden Sie das nützlich?

Ähnliche Artikel