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

Галерея на изображение с размытием фона

Отличное решение, как показ фотографий в галерее, которая по стилистике идет виде каменной кладки с поддержкой лайтбокса, где создано с помощью JavaScript. Также здесь задействованы шрифтовые иконки, которые идут на переключение картинок, а точнее в кнопках по сторонам. По умолчанию вы открываете страницу, где представлены картинки, что расположены виде кирпичной кладки. Но стоит открыть одно изображение, то изображение появляется по центру, а остальное все идет фоном, но кроме темно прозрачных кнопок. Сам каркас выполнен в стандартном виде, где все понятно по функциям, как перемотка, так и отключение показа.

Плюс в том, что здесь адаптивные изображения, которые загружают разные изображения в зависимости от размера браузера пользователя с размытыми страницы. Но везде будет отображаться корректно, так как отлично настроено под мобильные экраны. Такой вид галерей подойдет на многие тематические сайты, где нужно разместить, около 30 снимков. Хотя можно намного больше, просто нужно будет прокручивать страницу. Также нужно понимать, что размер не будет оригинален, он автоматически уменьшается, по этому мы может загружать разные фотографии по разнывм размерам, вот по этому получается красивая кирпичная стена из картинок.

Установка:

HEAD

Код

HTML

Код

CSS

Код

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300);
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Open Sans';
}

h1 {
  font-weight: 100;
  margin: 0;
}

section {
  column-width: 300px;
  column-gap: 5px;
  padding: 5px;
}

section img {
  width: 100%;
  cursor: pointer;
}

.lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
  background: #7f8c8d;
  perspective: 1000;
}

.filter {
  position: absolute;
  width: 100%;
  height: 100%;
  filter: blur(20px);
  opacity: 0.5;
  background-position: center;
  background-size: cover;
}

.lightbox img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateY(0deg);
  max-height: 95vh;
  max-width: calc(95vw - 100px);
  transition: 0.8s cubic-bezier(0.7, 0, 0.4, 1);
  transform-style: preserve-3d;
}

/*.lightbox:hover img{
  transform: translate(-50%, -50%) rotateY(180deg);
}*/

[class^="arrow"] {
  height: 200px;
  width: 50px;
  background: rgba(0, 0, 0, 0.4);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

[class^="arrow"]:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
  width: 15px;
  height: 15px;
}

.arrowr {
  right: 0;
}

.arrowr:after {
  border-right: 1px solid white;
  border-bottom: 1px solid white;
}

.arrowl {
  left: 0;
}

.arrowl:after {
  border-left: 1px solid white;
  border-top: 1px solid white;
}

.close {
  position: absolute;
  right: 0;
  width: 50px;
  height: 50px;
  background: rgba(0, 0, 0, 0.4);
  margin: 20px;
  cursor: pointer;
}

.close:after,
.close:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 100%;
  background: #e74c3c;
}

.close:after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.close:before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.title {
  font-size: 20px;
  color: #000;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
}

Код

$(window).load(function() {

  $("section img").click(function() {
  $(".lightbox").fadeIn(300);
  $(".lightbox").append("<img src='" + $(this).attr("src") + "' alt='" + $(this).attr("alt") + "' />");
  $(".filter").css("background-image", "url(" + $(this).attr("src") + ")");
  /*$(".title").append("<h1>" + $(this).attr("alt") + "</h1>");*/
  $("html").css("overflow", "hidden");
  if ($(this).is(":last-child")) {
  $(".arrowr").css("display", "none");
  $(".arrowl").css("display", "block");
  } else if ($(this).is(":first-child")) {
  $(".arrowr").css("display", "block");
  $(".arrowl").css("display", "none");
  } else {
  $(".arrowr").css("display", "block");
  $(".arrowl").css("display", "block");
  }
  });

  $(".close").click(function() {
  $(".lightbox").fadeOut(300);
  $("h1").remove();
  $(".lightbox img").remove();
  $("html").css("overflow", "auto");
  });

  $(document).keyup(function(e) {
  if (e.keyCode == 27) {
  $(".lightbox").fadeOut(300);
  $(".lightbox img").remove();
  $("html").css("overflow", "auto");
  }
  });

  $(".arrowr").click(function() {
  var imgSrc = $(".lightbox img").attr("src");
  var search = $("section").find("img[src$='" + imgSrc + "']");
  var newImage = search.next().attr("src");
  /*$(".lightbox img").attr("src", search.next());*/
  $(".lightbox img").attr("src", newImage);
  $(".filter").css("background-image", "url(" + newImage + ")");

  if (!search.next().is(":last-child")) {
  $(".arrowl").css("display", "block");
  } else {
  $(".arrowr").css("display", "none");
  }
  });

  $(".arrowl").click(function() {
  var imgSrc = $(".lightbox img").attr("src");
  var search = $("section").find("img[src$='" + imgSrc + "']");
  var newImage = search.prev().attr("src");
  /*$(".lightbox img").attr("src", search.next());*/
  $(".lightbox img").attr("src", newImage);
  $(".filter").css("background-image", "url(" + newImage + ")");

  if (!search.prev().is(":first-child")) {
  $(".arrowr").css("display", "block");
  } else {
  $(".arrowl").css("display", "none");
  }
  });

});

Больше похоже на Организацию изображений, подобная каменной кладке, которая идеально размещает изображения в сетке без каких-либо пробелов. Где вы отлично просматриваете все изначальные картинки, что по умолчанию идут в своей форме, но в уменьшенном виде.

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

30 Июня 2023 Загрузок: 2 Просмотров: 657 Комментариев: (1)

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

СКАЧАТЬ

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

Kosten

Комментарии: 1
Порядок вывода комментариев: Kosten 02 Июля 2023 18:11¹ 0 Если кто встречал Галерея, которая создана на CSS3, но со шрифтами конечно, то плиз поделитесь. Так как понимаю, такие галереи, с явоскриптом и библиотеками мало кто устанавливает.