Отзывчивая галерея изображений Masonry с лайтбоксом в HTML CSS и JavaScript

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

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

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

HTML КОД:

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">

<h1>Masonry Image Gallery with Lightbox</h1>
    <div class="lightbox">
      <div class="wrapper">
        <header>
          <div class="details">
            <i class="uil uil-camera"></i>
            <span>Image Preview</span>
          </div>
          <div class="buttons"><i class="close-icon uil uil-times"></i></div>
        </header>
        <div class="preview-img">
          <div class="img"><img src="" alt="preview-img"></div>
        </div>
      </div>
    </div>
    <section class="gallery">
      <ul class="images">
        <li class="img"><img src="images/img-1.jpg" alt="img"></li>
        <li class="img"><img src="images/img-2.jpg" alt="img"></li>
        <li class="img"><img src="images/img-3.jpg" alt="img"></li>
        <li class="img"><img src="images/img-4.jpg" alt="img"></li>
        <li class="img"><img src="images/img-5.jpg" alt="img"></li>
        <li class="img"><img src="images/img-6.jpg" alt="img"></li>
        <li class="img"><img src="images/img-7.jpg" alt="img"></li>
        <li class="img"><img src="images/img-8.jpg" alt="img"></li>
        <li class="img"><img src="images/img-9.jpg" alt="img"></li>
        <li class="img"><img src="images/img-10.jpg" alt="img"></li>
        <li class="img"><img src="images/img-11.jpg" alt="img"></li>
      </ul>
    </section>

CSS КОД:

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
h1 {
  text-align: center;
  margin-top: 50px;
}
/* Masonry image gallery styling */
.gallery {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gallery .images {
  gap: 15px;
  max-width: 85%;
  margin: 40px 0;
  columns: 5 310px;
  list-style: none;
}
.gallery .images .img {
  display: flex;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  margin-bottom: 14px;
  border-radius: 4px;
}
.gallery .images img {
  width: 100%;
  transition: transform 0.2s ease;
}

.gallery .images .img:hover img {
  transform: scale(1.1);
}

/* Image lightbox styling */
.lightbox {
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  position: fixed;
  visibility: hidden;
  background: rgba(0,0,0,0.65);
}
.lightbox.show {
  visibility: visible;
}
.lightbox .wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 100%;
  padding: 20px;
  max-width: 850px;
  background: #fff;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.9);
  transition: transform 0.1s ease;
}
.lightbox.show .wrapper {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}
.wrapper :where(header, .details) {
  display: flex;
  align-items: center;
}
.wrapper header {
  justify-content: space-between;
}
header .details i {
  font-size: 1.7rem;
}
header .details span {
  font-size: 1.2rem;
  margin-left: 10px;
}
header .buttons i {
  height: 40px;
  width: 40px;
  cursor: pointer;
  display: inline-block;
  color: #fff;
  margin-left: 10px;
  background: #6C757D;
  font-size: 1.25rem;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  transition: 0.2s ease;
}
header .buttons i:hover {
  background: #5f666d;
}
.wrapper .preview-img {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
.preview-img .img {
  max-height: 65vh;
}
.preview-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Responsive media query code */
@media screen and (max-width: 688px) {
  .lightbox .wrapper {
    padding: 12px;
    max-width: calc(100% - 26px);
  }
  .wrapper .preview-img {
    margin-top: 15px;
  }
  .gallery .images {
    max-width: 100%;
    padding: 0 13px;
    margin-top: 20px;
  }
}

JAVASCRIPT КОД:

const allImages = document.querySelectorAll(".images .img");
const lightbox = document.querySelector(".lightbox");
const closeImgBtn = lightbox.querySelector(".close-icon");

allImages.forEach(img => {
    // Calling showLightBox function with passing clicked img src as argument
    img.addEventListener("click", () => showLightbox(img.querySelector("img").src));
});

const showLightbox = (img) => {
    // Showing lightbox and updating img source
    lightbox.querySelector("img").src = img;
    lightbox.classList.add("show");
    document.body.style.overflow = "hidden";
}

closeImgBtn.addEventListener("click", () => {
    // Hiding lightbox on close icon click
    lightbox.classList.remove("show");
    document.body.style.overflow = "auto";
});

СКАЧАТЬ