ZorNet.Ru — сайт для вебмастера » HTML и CSS » Галерея изображений в CSS без JavaScript

Галерея изображений в CSS без JavaScript

В статье дна из простых на CSS, но без использования JavaScript. Где подборка картинок идет в самом низу, что при клике показывается. Здесь нужно заметить, что одно из главных, что эта галерея заменяет основное изображение, если вы нажимаете на миниатюры. При выборе какая картинка должна вывести на экран, то стоит сделать клик на небольшой миниатюре, что аналогично предоставлена.

Блок с большими картинками должен иметь ширину, равную ширине одного из больших снимков. Также переполнение свойства CSS должно иметь скрытое значение в качестве значения для этого блока.

Если кто знает про якорные ссылки, то вот такому сценарию эта галерея работает. Вообще небольшие снимки имеют свою функцию выбора, что выставлены под переход с соответствующими якорями, которые на прямую связывают их с большими картинками.

Первый вариант:

Приступаем к установке:

HTML

Код

CSS

Код

.kalsenumb-nailserestin {
  display: block;
  position: relative;
  width: 100%;
  overflow: hidden;
}
.kalsenumb-nailserestin .senoeg-usingekin {
  overflow: hidden;
  overflow: hidden;
  width: 100%;
  height: 70vmin;
  margin: 0;
  padding: 0;
  list-style: none;
}
.kalsenumb-nailserestin .senoeg-usingekin > li {
  width: 100%;
  height: 70vmin;
  position: absolute;
  z-index: 1;
  overflow: hidden;
}
.kalsenumb-nailserestin .senoeg-usingekin > li > img {
  width: 100%;
  height: auto;
}
/*
.kalsenumb-nailserestin .senoeg-usingekin > li:first-child:not(:target) {
  z-index: 1;
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
}
*/
.kalsenumb-nailserestin .thumbnails {
  display: block;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
}
.kalsenumb-nailserestin .thumbnails > li {
  float: left;
  width: 20%;
}
.kalsenumb-nailserestin .thumbnails > li > a {
  display: block;
}
.kalsenumb-nailserestin .thumbnails > li > a > img {
  width: 100%;
  height: auto;
}

.kalsenumb-nailserestin .senoeg-usingekin li:target {
  z-index: 3;
  -webkit-animation: makesang 1s 1;
}
.kalsenumb-nailserestin .senoeg-usingekin li:not(:target) {
  -webkit-animation: hidden 1s 1;
}
@-webkit-keyframes makesang {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  }
  100% {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  }
}
@keyframes makesang {
  0% {
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  }
  100% {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  }
}
@-webkit-keyframes hidden {
  0% {
  z-index: 2;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  }
  100% {
  z-index: 2;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  }
}
@keyframes hidden {
  0% {
  z-index: 2;
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  }
  100% {
  z-index: 2;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
  }
}

.gesimp-lekalsen {
width: 1275px;
}

В результате, после нажатия, эти небольшие изображение, которые по умолчанию соответствуют большим изображениям будет показано в другом блоке, фактически и технически говоря, оно будет прокручено до соответствующего изображения в этом блоке

Демонстрация

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

Здесь идет аналогичная функция на галерею, только не снизу будут небольшие миниатюры, а с левой стороны, что можно посмотреть на demo странице. Здесь здесь предварительно идет загрузка каждого изображение в собственное уникальное div и затем предотвращаем его отображение, размещая его в крайнем левом углу окна браузера.

Второй вариант:

HTML

Код

CSS

Код

#saqualupa-nowledge {
  width: 600px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  margin: 100px auto;
  border: 2px solid #003C72;
}

#nomosubus-inesledge {
  list-style: none;
  padding: 0;
  margin: 0;
  float: left;
}

#nomosubus-inesledge li {
  padding: 0;
  margin: 0;
  float: left;
  clear: both;
}

#nomosubus-inesledge li a img {
  display: block;
  border: none;
}

#nomosubus-inesledge li a {
  display: block;
}

#grokanducsim-provemen {
  width: 500px;
  height: 375px;
  overflow: hidden;
  float: left;
}

Если брать первый вариант, то просмотр с мобильного аппарата идет корректным, по второму не так, он только рассчитан на большие мониторы, где можно поставить на отдельные страницы.

А сами по своей конструкций их устанавливают под тематику интернет магазин или услуги, где изначально уже в миниатюре виден рисунок, где остается только выбрать и кликнут на тот, который нужно, чтоб он увеличился.

Демонстрация

06 Февраля 2019 Просмотров: 5543 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Kosten

Комментарии: 0