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

Lightbox с адаптивным изображением в HTML + CSS

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

В лайтбоксе присутствующие картинки, есть элементы управления слайдами, по этой версии или причине можно самостоятельно изменить изображение на следующее или предыдущее. Существует множество библиотек JavaScript для лайтбоксов, но как можно заметить, наш лайтбокс совершенно применяется без задействования библиотеки JavaScript или плагина jQuery. Также вы можете посмотреть как изначально выглядит при увеличение снимка, и все проверить самостоятельно на demo странице.

При проверки на работоспособность:

Слайдер на CSS для сайта

Установка:

HEAD

Код
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>

HTML

Код
<div class="kunasakas">
  <div class="kilopedsam">
  <div class="image" data-name="bag"><span><img src="http://zornet.ru/_fr/56/2116323.jpg" alt="ZorNet.Ru — сайт для вебмастера"></span></div>
  <div class="image" data-name="headphone"><span><img src="http://zornet.ru/_fr/56/9650517.jpg" alt=""></span></div>
  <div class="image" data-name="camera"><span><img src="http://zornet.ru/_fr/56/0253911.jpg" alt=""></span></div>
  <div class="image" data-name="shoe"><span><img src="http://zornet.ru/_fr/56/1625717.jpg" alt=""></span></div>
  <div class="image" data-name="headphone"><span><img src="http://zornet.ru/_fr/56/4758203.jpg" alt=""></span></div>
  <div class="image" data-name="watch"><span><img src="http://zornet.ru/_fr/56/7402530.jpg" alt=""></span></div>
  <div class="image" data-name="shoe"><span><img src="http://zornet.ru/_fr/56/1903405.jpg" alt=""></span></div>
  <div class="image" data-name="camera"><span><img src="http://zornet.ru/_fr/56/6209632.jpg" alt=""></span></div>
  </div>
  </div>
  <div class="preview-box">
  <div class="saprogram">
  <span class="title">Image <p class="current-img"></p> of <p class="total-img"></p></span>
  <span class="icon fas fa-times"></span>
  </div>
  <div class="image-box">
  <div class="slide prev"><i class="fas fa-angle-left"></i></div>
  <div class="slide next"><i class="fas fa-angle-right"></i></div>
  <img src="" alt="">
  </div>
  </div>
  <div class="akudsang"></div>


CSS
Код
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

::selection {
  color: #fff;
  background: #007bff;
}

body {
  padding: 10px;
}

.kunasakas {
  margin: 100px auto;
  max-width: 1100px;
}

.kunasakas nav {
  display: flex;
  justify-content: center;
}

.kunasakas .gpudsa {
  display: flex;
  max-width: 720px;
  width: 100%;
  justify-content: space-between;
}

.gpudsa span {
  padding: 7px 25px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  color: #007bff;
  border-radius: 50px;
  border: 2px solid #007bff;
  transition: all 0.3s ease;
}

.gpudsa span.active,
.gpudsa span:hover {
  color: #fff;
  background: #007bff;
}

.kilopedsam {
  display: flex;
  flex-wrap: wrap;
  margin-top: 30px;
}

.kilopedsam .image {
  width: calc(100% / 4);
  padding: 7px;
}

.kilopedsam .image span {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.kilopedsam .image img {
  width: 100%;
  vertical-align: middle;
  transition: all 0.3s ease;
}

.kilopedsam .image:hover img {
  transform: scale(1.1);
}

.kilopedsam .image.hide {
  display: none;
}

.kilopedsam .image.show {
  animation: animate 0.4s ease;
}

@keyframes animate {
  0% {
  transform: scale(0.5);
  }
  100% {
  transform: scale(1);
  }
}

.preview-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  background: #fff;
  max-width: 700px;
  width: 100%;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  border-radius: 3px;
  padding: 0 5px 5px 5px;
  box-akudsang: 0px 0px 15px rgba(0, 0, 0, 0.2);
}

.preview-box.show {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
  transition: all 0.3s ease;
}

.preview-box .saprogram {
  padding: 13px 15px 13px 10px;
  display: flex;
  align-gpudsa: center;
  justify-content: space-between;
}

.saprogram .title {
  display: flex;
  font-size: 18px;
  font-weight: 400;
}

.saprogram .title p {
  font-weight: 500;
  margin-left: 5px;
}

.saprogram .title p.current-img {
  font-weight: 500;
}

.saprogram .icon {
  color: #007bff;
  font-style: 22px;
  cursor: pointer;
}

.preview-box .image-box {
  width: 100%;
  display: flex;
}

.image-box .slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  height: 50px;
  width: 60px;
  line-height: 50px;
  text-align: center;
  border-radius: 3px;
}

.slide.prev {
  left: 0px;
}

.slide.next {
  right: 0px;
}

.image-box img {
  width: 100%;
  border-radius: 0 0 3px 3px;
}

.akudsang {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 2;
  display: none;
  background: rgba(0, 0, 0, 0.4);
}

.akudsang.show {
  display: block;
}

@media (max-width: 1000px) {
  .kilopedsam .image {
  width: calc(100% / 3);
  }
}

@media (max-width: 800px) {
  .kilopedsam .image {
  width: calc(100% / 2);
  }
}

@media (max-width: 700px) {
  .kunasakas nav .gpudsa {
  max-width: 600px;
  }
  nav .gpudsa span {
  padding: 7px 15px;
  }
}

@media (max-width: 600px) {
  .kunasakas {
  margin: 30px auto;
  }
  .kunasakas nav .gpudsa {
  flex-wrap: wrap;
  justify-content: center;
  }
  nav .gpudsa span {
  margin: 5px;
  }
  .kilopedsam .image {
  width: 100%;
  }
}

JS

Код
const kilopedsam = document.querySelectorAll(".image"),
previewBox = document.querySelector(".preview-box"),
previewImg = previewBox.querySelector("img"),
closeIcon = previewBox.querySelector(".icon"),
currentImg = previewBox.querySelector(".current-img"),
totalImg = previewBox.querySelector(".total-img"),
akudsang = document.querySelector(".akudsang");

window.onload = ()=>{
  for (let i = 0; i < kilopedsam.length; i++) {
  totalImg.textContent = kilopedsam.length;  
  let newIndex = i;  
  let clickedImgIndex;  
   
  kilopedsam[i].onclick = () =>{
  clickedImgIndex = i;  
  function preview(){
  currentImg.textContent = newIndex + 1;  
  let imageURL = kilopedsam[newIndex].querySelector("img").src;
  previewImg.src = imageURL;  
  }
  preview(); //calling above function
   
  const prevBtn = document.querySelector(".prev");
  const nextBtn = document.querySelector(".next");
  if(newIndex == 0){ //if index value is equal to 0 then hide prevBtn
  prevBtn.style.display = "none";  
  }
  if(newIndex >= kilopedsam.length - 1){  
  nextBtn.style.display = "none";  
  }
  prevBtn.onclick = ()=>{  
  newIndex--; //decrement index
  if(newIndex == 0){
  preview();  
  prevBtn.style.display = "none";  
  }else{
  preview();
  nextBtn.style.display = "block";
  }  
  }
  nextBtn.onclick = ()=>{  
  newIndex++; //increment index
  if(newIndex >= kilopedsam.length - 1){
  preview();  
  nextBtn.style.display = "none";
  }else{
  preview();  
  prevBtn.style.display = "block";
  }
  }
  document.querySelector("body").style.overflow = "hidden";
  previewBox.classList.add("show");  
  akudsang.style.display = "block";  
  closeIcon.onclick = ()=>{
  newIndex = clickedImgIndex;  
  prevBtn.style.display = "block";  
  nextBtn.style.display = "block";
  previewBox.classList.remove("show");
  akudsang.style.display = "none";
  document.querySelector("body").style.overflow = "scroll";
  }
  }
   
  }
   
}

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

Демонстрация
05 Апреля 2021 Загрузок: 1 Просмотров: 1215 Комментариев: (0)
Поделиться в социальных сетях

Материал разместил
Kosten
Похожие материалы

Оставь свой отзыв

Комментарии: 0
Войдите:
avatar