Comment Créer une Galerie Simple CSS Sans Utiliser JavaScript

Il s'est avéré que il est parfaitement possible de créer une galerie simple CSS dans utiliser Javascript. Dans cet article, nous allons vous montrer comment créer une galerie avec uniquement HTML et CSS.

Comment créer une galerie simple CSS en utilisant HTML?

Comme nous le savons, la galerie se compose de deux blocs d'images. Le premier contient des petites images (thumbnails), l'autre contient des grandes images. Si vous voulez créer une galerie simple, vous ne devez définir que des ancres uniques ( picture1, picture2, picture3, picture4, picture5).

Le code doit ressembler à cela:

<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. Comment créer une galerie simple en utilisant CSS?

Vous pouvez facilement créer une galerie CSS avec seulement CSS en suivant ces étapes:

  • Définissez la largeur de bloc des grandes images à égal à la largeur de l'une des grandes images.
  • Définissez la propriété CSS overflow à sa valeur “hidden” pour le bloc des grandes images.
  • Placez les images avec les liens d'ancrage dans ce bloc.
  • Donnez des liens aux petites images avec les ancrages correspondants qui les relient avec les grandes images.

Par cette dernière étape, en cliquant sur la petite image, il va faire défiler à la grande image correspondante dans le bloc des grandes images.

Le code ressemblera à cela:

#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%;
}

Notre galerie est déjà créée ! Voyons le code complet:

Exemple

<!DOCTYPE html>
<html>
  <title>Titre du document</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>
Si vous voulez créer un curseur d'image ou un diaporama, vous pouvez trouver toute information utile ici.