Як створити лайтбокс за допомогою HTML, CSS та JavaScript

Вступ

Лайтбокс - це поєднання двох компонентів, модального та слайд-шоу. Тут ви побудуєте простий освітлювач , використовуючи HTML, CSSі JavaScript.

Лайтбокс буде міститися в модальному режимі, який ініціюватиметься деякими JavaScriptз обробників подій у HTMLрозмітці. Ви будете будувати стилі, які забезпечуватимуть стан CSSі поведінку JavaScript. Ви також знайдете список посилань на методи, які ви використовуєте, та інші корисні tid-біти, пов’язані з цим посібником, унизу.

Наші образи

Зображення, які ми будемо використовувати, постачає Pexels, безкоштовна фотогалерея, яка дозволяє швидко, безкоштовно і, як правило, без атрибуцій, надавати високоякісні зображення своїм проектам.

Просто покажи мені код!

Живий приклад можна знайти тут - CodePen / Lightbox, а повний проект коду знаходиться внизу.

Крок 1. Розмітка

Розмітка або HTMLзабезпечує структуру лайтбоксу.

Toy car on the road.Toy car exploring offroad.Toy car in the city. × Toy car on the road.Toy car exploring offroad.Toy car in the city. ❮ ❯ Toy car on the roadToy car exploring offroad.Toy car in the city.

Крок 2. Стиль за допомогою CSS

CSSНадає вам з різними станами , для освітлювача. Такі речі, як видимість, позиціонування та ефекти наведення.

Ваша таблиця стилів повинна виглядати так:

/* Here you provide a best practice's "reset", read more about it at the bottom! :) */ html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } /* You define the style of our previews here, you are using flex to display the images "responsively". */ .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } /* Now you want to define what the lightbox will look like. Note that you have the display as none. You don't want it to show until the user clicks on one of the previews. You will change this display property with JavaScript below. */ .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } /* Same with your slides, you set the display to none, because you want to choose which one is shown at a time. */ .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } /* You want the previews a little transparent to show that they are "inactive". You then add an .active or :hover class to animate the selections for your user when they interact with your controls and clickable content. */ img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .previous, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); }

Крок 3. JavaScript

Тепер до справи! Ваш JavaScript повинен виглядати так:

// Initialize here and run showSlide() to give your lightbox a default state. let slideIndex = 1; showSlide(slideIndex); // You are providing the functionality for your clickable content, which is // your previews, dots, controls and the close button. function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; } function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; // Note that you are assigning new values here to our slidIndex. function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; // This is your logic for the light box. It will decide which slide to show // and which dot is active. function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; };

І це все! Тепер складіть весь код разом. Тепер у вас повинен бути функціональний лайтбокс.

Весь код

  html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0; } .preview { width: 100%; } .row { display: flex; flex-direction: row; justify-content: space-between; } .row > .col { padding: 0 8px; } .col { float: left; width: 25%; } .modal { display: none; position: fixed; z-index: 1; padding: 10px 62px 0px 62px; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: black; } .modal-content { position: relative; display: flex; flex-direction: column; justify-content: center; margin: auto; padding: 0 0 0 0; width: 80%; max-width: 1200px; } .slide { display: none; } .image-slide { width: 100%; } .modal-preview { width: 100%; } .dots { display: flex; flex-direction: row; justify-content: space-between; } img.preview, img.modal-preview { opacity: 0.6; } img.active, .preview:hover, .modal-preview:hover { opacity: 1; } img.hover-shadow { transition: 0.3s; } .hover-shadow:hover { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } .close { color: white; position: absolute; top: 10px; right: 25px; font-size: 35px; font-weight: bold; } .close:hover, .close:focus { color: #999; text-decoration: none; cursor: pointer; } .previous, .next { cursor: pointer; position: absolute; top: 50%; width: auto; padding: 16px; margin-top: -50px; color: white; font-weight: bold; font-size: 20px; transition: 0.6s ease; border-radius: 0 3px 3px 0; user-select: none; -webkit-user-select: none; } .next { right: 0; border-radius: 3px 0 0 3px; } .previous:hover, .next:hover { background-color: rgba(0, 0, 0, 0.8); } Toy car on the road.Toy car exploring offroad.Toy car in the city × Toy car on the road.Toy car exploring offroad.Toy car in the city. ❮ ❯ Toy car on the road.Toy car exploring offroad.Toy car in the city let slideIndex = 1; showSlide(slideIndex); function openLightbox() { document.getElementById('Lightbox').style.display = 'block'; }; function closeLightbox() { document.getElementById('Lightbox').style.display = 'none'; }; function changeSlide(n) { showSlide(slideIndex += n); }; function toSlide(n) { showSlide(slideIndex = n); }; function showSlide(n) { const slides = document.getElementsByClassName('slide'); let modalPreviews = document.getElementsByClassName('modal-preview'); if (n > slides.length) { slideIndex = 1; }; if (n < 1) { slideIndex = slides.length; }; for (let i = 0; i < slides.length; i++) { slides[i].style.display = "none"; }; for (let i = 0; i < modalPreviews.length; i++) { modalPreviews[i].className = modalPreviews[i].className.replace(' active', ''); }; slides[slideIndex - 1].style.display = 'block'; modalPreviews[slideIndex - 1].className += ' active'; };  

Більше інформації:

HTML

Модальний - спливаюче вікно

Обробники подій - властивості HTML, які прослуховують події користувача.

Сутність - рядок, який представляє зарезервований символ у HTML.

CSS

box-sizing: - Властивість CSS3, яка контролює спосіб відображення вмісту браузером на основі висоти та ширини.

Flex-box - нова технологія, яка допомагає розміщувати вміст HTML у чуйній манорі.

: hover - Псевдоселектор, який запускається, коли користувач наводить курсор на елемент, коли йому присвоєно цей клас.

JavaScript

нехай змінна Block-scope.

const Константа блочного діапазону.

getElementById () - метод документа, який повертає посилання на елемент HTML.

getElementsByClassName () - метод документа, який повертає масив посилань на html, що мають відповідні класи.

+ = - оператор присвоєння, який буде додавати числа або об'єднувати рядки.

Ресурси:

Приклад у реальному часі - CodePen, який демонструє вищевказаний код.

Інтерактивний Flex-Box - інтерактивний CodePen, який демонструє поведінку flex-box.

Pexels - Безкоштовна фотогалерея.

MDN - A great place for information about web stuff.

W3School - Lightbox - This code was inspired from here. Thanks W3Schools!