54 lines
1.6 KiB
JavaScript
54 lines
1.6 KiB
JavaScript
const navbarBtn = document.querySelector('#navbar-btn');
|
|
const mainMenu = document.querySelector('.main-menu');
|
|
navbarBtn.addEventListener('click', () => {
|
|
mainMenu.classList.toggle('active');
|
|
if(mainMenu.classList.contains('active')) {
|
|
disableScroll();
|
|
}
|
|
else {
|
|
enableScroll();
|
|
}
|
|
});
|
|
|
|
function disableScroll() {
|
|
document.body.style.overflow = 'hidden';
|
|
}
|
|
function enableScroll() {
|
|
document.body.style.overflow = 'auto';
|
|
}
|
|
|
|
//Gallery lightbox
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
// ===> DOM elements <=== //
|
|
const $imagesContainer = document.getElementById('gallery-lightbox');
|
|
const $lightbox = document.getElementById('lightbox');
|
|
|
|
if ($imagesContainer && $lightbox) {
|
|
// ===> Event listeners and triggers <=== //
|
|
|
|
// Show lightbox
|
|
$imagesContainer.addEventListener('click', e => {
|
|
const imageWrapper = e.target.closest('.gallery-image');
|
|
if (imageWrapper) {
|
|
const image = imageWrapper.querySelector('img');
|
|
if (image) {
|
|
$lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
|
|
$lightbox.classList.add('show');
|
|
}
|
|
}
|
|
});
|
|
|
|
// Hide Lightbox
|
|
$lightbox.addEventListener('click', (e) => {
|
|
if (!e.target.hasAttribute('src')) {
|
|
$lightbox.classList.remove('show');
|
|
}
|
|
});
|
|
|
|
// Loading...
|
|
setTimeout(() => {
|
|
$imagesContainer.classList.remove('loading');
|
|
}, 1500);
|
|
}
|
|
});
|