diff --git a/docs/_includes/gallery.html b/docs/_includes/gallery.html index 0780261..b2b2f24 100644 --- a/docs/_includes/gallery.html +++ b/docs/_includes/gallery.html @@ -47,15 +47,6 @@ \ No newline at end of file diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 82385ef..97a41a5 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -16,30 +16,30 @@ @@ -51,4 +51,28 @@ + + +{% if page.additional_script %} + +{% endif %} + diff --git a/docs/assets/css/style.css b/docs/assets/css/style.css index 808aad1..ae24cdb 100644 --- a/docs/assets/css/style.css +++ b/docs/assets/css/style.css @@ -147,9 +147,13 @@ Main Menu transition: background-color 0.5s; } +#main-menu > li.active { + background-color: var(--color-background-dark); +} + #main-menu .separator { margin: 25px 20%; - border: 1px #939393 solid; + border: 1px var(--color-background-dark) solid; } /* ======== diff --git a/docs/assets/js/gallery.js b/docs/assets/js/gallery.js new file mode 100644 index 0000000..cbe3f36 --- /dev/null +++ b/docs/assets/js/gallery.js @@ -0,0 +1,117 @@ +const modal = document.getElementById('modal'); +const modalImg = document.getElementById('modal-image'); +const modalControls = document.querySelectorAll('.modal-control'); +const modalPrev = document.getElementById('modal-prev'); +const modalNext = document.getElementById('modal-next'); +const modalClose = document.getElementById('modal-close'); +const modalDetails = document.getElementById('modal-details-box'); +const galleryImages = document.querySelectorAll('.photo-thumbnail'); +let currentSlideIndex = 0; + +function preloadImages() { + photoSrcs.forEach((src) => { + const img = new Image(); + img.src = src; + }); +} + +document.addEventListener('DOMContentLoaded', function() { + preloadImages(); // Preload images when the DOM is ready +}); + +galleryImages.forEach((image) => { + image.addEventListener('click', () => { + showModal(); + showPhoto(parseInt(image.dataset.orderindex)); + }); +}); + +modal.addEventListener('click', (e) => { + if (e.target === modal || e.target.classList.contains('close')) { + hideModal(); + } +}); + +modalImg.addEventListener('load', function() { + modalControls.forEach( (c) => { + c.classList.add('hidden'); + }); +}); + +modalPrev.addEventListener('click', () => { + showPhoto(currentSlideIndex - 1); +}); + +modalNext.addEventListener('click', () => { + showPhoto(currentSlideIndex + 1); +}); + +function showModal() { + modal.classList.add('visible'); + document.body.style.overflow = 'hidden'; // Hide the scrollbar +} + +function hideModal() { + modal.classList.remove('visible'); + document.body.style.overflow = 'auto'; // Restore the scrollbar + modalPrev.classList.remove('hidden'); + modalNext.classList.remove('hidden'); + modalImg.src = ""; +} + +function showPhoto(n) { + if (n >= photoSrcs.length) { + n = 0; + } + if (n < 0) { + n = photoSrcs.length - 1; + } + currentSlideIndex = n; + modalImg.src = photoSrcs[n]; + const details = photoDetails[n]; + if (details) { + modalDetails.innerHTML = "

" + details + "

" + modalDetails.classList.add('visible'); + } else if (modalDetails.classList.contains('visible')) { + modalDetails.classList.remove('visible'); + } +} + +document.addEventListener('keydown', (e) => { + if (modal.classList.contains('visible')) { + if (e.key === 'ArrowLeft' || e.keyCode === 37) { + showPhoto(currentSlideIndex - 1); + } else if (e.key === 'ArrowRight' || e.keyCode === 39) { + showPhoto(currentSlideIndex + 1); + } else if (e.key === 'Escape' || e.keyCode === 27) { + hideModal(); + } + } +}); + +let touchStartX = 0; +let touchEndX = 0; + +document.addEventListener('touchstart', e => { + if (modal.classList.contains('visible')) { + touchStartX = e.changedTouches[0].screenX + } +}) + +document.addEventListener('touchend', e => { + if (modal.classList.contains('visible')) { + if (e.target === modalClose) { + hideModal(); + } + touchEndX = e.changedTouches[0].screenX + updateOnSwipe() + } +}) +function updateOnSwipe() { + const diff = touchEndX - touchStartX + if (diff < -50) { + showPhoto(currentSlideIndex - 1); + } else if (diff > 50) { + showPhoto(currentSlideIndex + 1); + } +} \ No newline at end of file diff --git a/docs/foggy.md b/docs/foggy.md index c4c1faf..5284939 100644 --- a/docs/foggy.md +++ b/docs/foggy.md @@ -1,6 +1,8 @@ --- layout: default title: Foggy | Simon Rey +navID: nav-foggy +additional_script: gallery.js --- # Foggy diff --git a/docs/index.md b/docs/index.md index 40ec1aa..816474a 100644 --- a/docs/index.md +++ b/docs/index.md @@ -1,6 +1,7 @@ --- layout: default title: Simon Rey Photo +additional_script: gallery.js --- # Me, Myself, and My Photos diff --git a/docs/insides.md b/docs/insides.md index 4ca5646..ee02016 100644 --- a/docs/insides.md +++ b/docs/insides.md @@ -1,6 +1,8 @@ --- layout: default title: Insides | Simon Rey +navID: nav-insides +additional_script: gallery.js --- # Insides diff --git a/docs/lines_that_divide_or_unite.md b/docs/lines_that_divide_or_unite.md index c522d34..4088bff 100644 --- a/docs/lines_that_divide_or_unite.md +++ b/docs/lines_that_divide_or_unite.md @@ -1,6 +1,8 @@ --- layout: default title: Lines that Divide or Unite | Simon Rey +navID: nav-lines-divide-unite +additional_script: gallery.js --- # Lines that Divide or Unite diff --git a/docs/movement.md b/docs/movement.md index 769aa39..c6330d7 100644 --- a/docs/movement.md +++ b/docs/movement.md @@ -1,6 +1,8 @@ --- layout: default title: Movement | Simon Rey +navID: nav-movement +additional_script: gallery.js --- # Movement diff --git a/docs/outsides.md b/docs/outsides.md index 3b244ab..f3047ce 100644 --- a/docs/outsides.md +++ b/docs/outsides.md @@ -1,6 +1,8 @@ --- layout: default title: Outsides | Simon Rey +navID: nav-outsides +additional_script: gallery.js --- # Outsides diff --git a/docs/patterns.md b/docs/patterns.md index 61d00cc..0795d94 100644 --- a/docs/patterns.md +++ b/docs/patterns.md @@ -1,6 +1,8 @@ --- layout: default title: Patterns | Simon Rey +navID: nav-patterns +additional_script: gallery.js --- # Patterns diff --git a/docs/portraits.md b/docs/portraits.md index dd3ae0c..ba487a9 100644 --- a/docs/portraits.md +++ b/docs/portraits.md @@ -1,6 +1,8 @@ --- layout: default title: Portraits | Simon Rey +navID: nav-portraits +additional_script: gallery.js --- # Portraits diff --git a/docs/scrape_the_surface.md b/docs/scrape_the_surface.md index 598895e..ddac701 100644 --- a/docs/scrape_the_surface.md +++ b/docs/scrape_the_surface.md @@ -1,6 +1,8 @@ --- layout: default title: Scrape the Surface | Simon Rey +navID: nav-scrape-surface +additional_script: gallery.js --- # Scrape the Surface diff --git a/docs/shaping_the_silhouette.md b/docs/shaping_the_silhouette.md index 4acf1c8..b0b31fc 100644 --- a/docs/shaping_the_silhouette.md +++ b/docs/shaping_the_silhouette.md @@ -1,6 +1,8 @@ --- layout: default title: Shaping the Silhouette | Simon Rey +navID: nav-shaping-silhouette +additional_script: gallery.js --- # Shaping the Silhouette diff --git a/docs/shipped_around.md b/docs/shipped_around.md index 4672c27..53bd94d 100644 --- a/docs/shipped_around.md +++ b/docs/shipped_around.md @@ -1,6 +1,8 @@ --- layout: default title: Shipped Around | Simon Rey +navID: nav-shipped-around +additional_script: gallery.js --- # Shipped Around diff --git a/docs/skies.md b/docs/skies.md index ef3099b..8e47057 100644 --- a/docs/skies.md +++ b/docs/skies.md @@ -1,6 +1,8 @@ --- layout: default title: Skies | Simon Rey +navID: nav-skies +additional_script: gallery.js --- # Skies diff --git a/docs/solitude.md b/docs/solitude.md index e405ac2..f1294b1 100644 --- a/docs/solitude.md +++ b/docs/solitude.md @@ -1,6 +1,8 @@ --- layout: default title: Solitudes | Simon Rey +navID: nav-solitude +additional_script: gallery.js --- # Solitudes diff --git a/docs/somewhere_up_in_the_sky.md b/docs/somewhere_up_in_the_sky.md index d395a4b..c7d29c7 100644 --- a/docs/somewhere_up_in_the_sky.md +++ b/docs/somewhere_up_in_the_sky.md @@ -1,6 +1,8 @@ --- layout: default title: Somewhere up in the Sky | Simon Rey +navID: nav-somewhere-up-sky +additional_script: gallery.js --- # Somewhere up in the Sky diff --git a/docs/strolling_the_streets.md b/docs/strolling_the_streets.md index 5596005..2f9c011 100644 --- a/docs/strolling_the_streets.md +++ b/docs/strolling_the_streets.md @@ -1,6 +1,8 @@ --- layout: default title: Strolling the Streets | Simon Rey +navID: nav-strolling-streets +additional_script: gallery.js --- # Strolling the Streets diff --git a/docs/the_other_side_of_the_mirror.md b/docs/the_other_side_of_the_mirror.md index 39ee673..75d589e 100644 --- a/docs/the_other_side_of_the_mirror.md +++ b/docs/the_other_side_of_the_mirror.md @@ -1,6 +1,8 @@ --- layout: default title: The Other Side of the Mirror | Simon Rey +navID: nav-other-side-mirror +additional_script: gallery.js --- # The Other Side of the Mirror