w3docs logo
  1. Snippets
  2. CSS
  3. Как создать CSS галерею без использования JavaScript

Как создать CSS галерею без использования JavaScript

Оказывается, вполне возможно создать простую CSS галерею, не используя Javascript. В этой статье мы покажем, как можно сделать это только с помощью HTML и CSS.

Как создать простую CSS галерею с помощью HTML?

Как известно галерея состоит из двух блоков изображений. Первый из них содержит мелкие изображения (миниатюры), а второй - крупные изображения. Если хотите создать галерею, вам необходимо указать только однозначные записи ( picture1, picture2, picture3, picture4, picture5).

Код будет выглядеть следующим образом:

<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. Как создать простую CSS галерею с помощью CSS?

Вы можете легко создать CSS галерею, следуя этим шагам:

  • Установите ширину блока крупных изображений, равную ширине одного из крупных изображений.
  • Установите CSS свойство overflow в значение “hidden” для блока крупных изображений.
  • Разместите изображения со ссылкой привязки внутри этого блока.
  • Установите ссылки к миниатюрам, чтобы связать их с крупными изображениями.

На данном этапе, если вы кликните по миниатюре, откроется соответствующее крупное изображение.

Код будет выглядеть следующим образом:

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

Теперь наша галерея готова! Посмотрим полный код:

Пример

<!DOCTYPE html>
<html>
  <title>Заголовок документа</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>
Если хотите создать слайдер изображений или слайд-шоу, можете найти много полезной информации об этом здесь.
Считаете ли это полезным?