tech-masters/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor lightbox functionality to initialize only if elements exist, improving performance and preventing errors. Maintain existing event listeners for closing the lightbox and handling keyboard interactions.

Browse Source
This commit is contained in:
Mohammed Al-yaseen
2025-05-15 00:00:12 +03:00
parent 0576243aca
commit 9807e9dcc9
1 changed files with 30 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
js/custom.js
View File

@@ -77,38 +77,41 @@
const lightboxClose = document.querySelector('.lightbox-close'); const lightboxClose = document.querySelector('.lightbox-close');
const projectImages = document.querySelectorAll('.popup-image'); const projectImages = document.querySelectorAll('.popup-image');
projectImages.forEach(image => { // Only initialize lightbox if elements exist
image.addEventListener('click', (e) => { if (lightbox && lightboxImage && lightboxClose && projectImages.length > 0) {
e.preventDefault(); projectImages.forEach(image => {
const imgSrc = image.getAttribute('href'); image.addEventListener('click', (e) => {
const imgAlt = image.querySelector('img').getAttribute('alt'); e.preventDefault();
const imgSrc = image.getAttribute('href');
const imgAlt = image.querySelector('img').getAttribute('alt');
lightboxImage.setAttribute('src', imgSrc); lightboxImage.setAttribute('src', imgSrc);
lightboxImage.setAttribute('alt', imgAlt); lightboxImage.setAttribute('alt', imgAlt);
lightbox.classList.add('active'); lightbox.classList.add('active');
document.body.style.overflow = 'hidden'; document.body.style.overflow = 'hidden';
});
}); });
});
lightboxClose.addEventListener('click', () => { lightboxClose.addEventListener('click', () => {
lightbox.classList.remove('active');
document.body.style.overflow = '';
});
lightbox.addEventListener('click', (e) => {
if (e.target === lightbox) {
lightbox.classList.remove('active'); lightbox.classList.remove('active');
document.body.style.overflow = ''; document.body.style.overflow = '';
} });
});
// Close lightbox with Escape key lightbox.addEventListener('click', (e) => {
document.addEventListener('keydown', (e) => { if (e.target === lightbox) {
if (e.key === 'Escape' && lightbox.classList.contains('active')) { lightbox.classList.remove('active');
lightbox.classList.remove('active'); document.body.style.overflow = '';
document.body.style.overflow = ''; }
} });
});
// Close lightbox with Escape key
document.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && lightbox.classList.contains('active')) {
lightbox.classList.remove('active');
document.body.style.overflow = '';
}
});
}
// Sticky Navigation // Sticky Navigation
$(window).on('scroll', function() { $(window).on('scroll', function() {