-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
18 changed files
with
4,138 additions
and
128 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Large diffs are not rendered by default.
Oops, something went wrong.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,155 @@ | ||
| .thumbnails { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| } | ||
|
|
||
| .lightbox { | ||
| display: none; | ||
| position: fixed; | ||
| z-index: 1; | ||
| left: 0; | ||
| top: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| overflow: auto; | ||
| background-color: #000000aa; | ||
| } | ||
|
|
||
| .lightbox-content { | ||
| position: relative; | ||
| align-content: center; | ||
| margin: auto; | ||
| padding: 0; | ||
| max-width: 1200px; | ||
| } | ||
|
|
||
| .close { | ||
| color: white; | ||
| text-shadow: 0 0 6px #000000; | ||
| position: absolute; | ||
| z-index: 1; | ||
| top: 10px; | ||
| right: 25px; | ||
| font-size: 35px; | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .close:hover, | ||
| .close:focus { | ||
| color: #999; | ||
| text-decoration: none; | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .cursor { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .prev, | ||
| .next { | ||
| cursor: pointer; | ||
| position: absolute; | ||
| top: 50%; | ||
| width: auto; | ||
| padding: 16px; | ||
| margin-top: -50px; | ||
| color: white; | ||
| text-shadow: 0 0 6px #000000; | ||
| font-weight: bold; | ||
| font-size: 20px; | ||
| transition: 0.6s ease; | ||
| border-radius: 0 3px 3px 0; | ||
| user-select: none; | ||
| } | ||
|
|
||
| /* Position the "next button" to the right */ | ||
| .next { | ||
| right: 0; | ||
| border-radius: 3px 0 0 3px; | ||
| } | ||
|
|
||
| .prev:hover, | ||
| .next:hover { | ||
| color: white; | ||
| background-color: rgba(0, 0, 0, 0.8); | ||
| } | ||
|
|
||
| img { | ||
| margin-bottom: -4px; | ||
| } | ||
|
|
||
| .caption-container { | ||
| font-family: 'Atkinson Hyperlegible', sans-serif; | ||
| font-weight: 400; | ||
| font-size: 1.3em; | ||
| text-align: center; | ||
| background-color: black; | ||
| padding: 2px 16px; | ||
| border-radius: 4px; | ||
| color: white; | ||
| } | ||
|
|
||
| .gallery { | ||
| background-color: white; | ||
| height: 10vh; | ||
| object-fit: scale-down; | ||
| opacity: 0.6; | ||
| } | ||
|
|
||
| .active, | ||
| .gallery: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); | ||
| } | ||
|
|
||
| .step-slides { | ||
| display: none; | ||
| } | ||
|
|
||
| .step-slides figure { | ||
| display: inline-grid; | ||
| margin-top: 0; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .step-slides img { | ||
| box-sizing: border-box; | ||
| background-color: white; | ||
| background-clip: content-box; | ||
| max-width: 100%; | ||
| max-height: 80vh; | ||
| display: block; | ||
| margin: auto; | ||
| padding: 5px; | ||
| object-fit: contain; | ||
| } | ||
|
|
||
| .step-slides figcaption:before { | ||
| content: "Crédit: "; | ||
| } | ||
|
|
||
| .step-slides figcaption { | ||
| background-clip: content-box; | ||
| background-color: #0000005c; | ||
| color: #fff; | ||
| font-family: 'Atkinson Hyperlegible', sans-serif; | ||
| font: italic smaller sans-serif; | ||
| padding: 5px; | ||
| text-align: right; | ||
| position: relative; | ||
| z-index: 1; | ||
| margin-top: -25px; | ||
| } | ||
|
|
||
| .step-slides a { | ||
| text-decoration: none; | ||
| color: white; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,97 @@ | ||
| // Initialize slide index | ||
| var slideIndex = 1; | ||
|
|
||
| function openLightbox(imgParams) { | ||
| document.getElementById("lightbox").style.display = "flex"; | ||
| // init slides | ||
| var slidesContainer = document.getElementById("slides-container"); | ||
| var thumbnails = document.getElementById("thumbnails"); | ||
| var slidesImg = JSON.parse(decodeURIComponent(imgParams)) | ||
| // empty divs | ||
| slidesContainer.innerHTML = ""; | ||
| thumbnails.innerHTML = ""; | ||
| var i = 0; | ||
| for (const [key, values] of Object.entries(slidesImg)) { | ||
| i++; | ||
| // slides | ||
| var divSlide = document.createElement("div"); | ||
| divSlide.classList.add("step-slides"); | ||
| var figure = document.createElement("figure"); | ||
| var slide = document.createElement("img"); | ||
| slide.src = key; | ||
| slide.alt = values.alt; | ||
| var credits = document.createElement("figcaption"); | ||
| credits.innerHTML = values.credit + " " | ||
| figure.appendChild(slide); | ||
| figure.appendChild(credits); | ||
| divSlide.appendChild(figure); | ||
| slidesContainer.appendChild(divSlide); | ||
| // thumbnails | ||
| var divThumbnail = document.createElement("div"); | ||
| var thumbnail = document.createElement("img"); | ||
| thumbnail.src = key; | ||
| thumbnail.alt = values.alt; | ||
| thumbnail.credit = values.credit; | ||
| thumbnail.classList.add("gallery"); | ||
| thumbnail.classList.add("cursor"); | ||
| thumbnail.setAttribute("onclick", `currentSlide(${i});`); | ||
| divThumbnail.appendChild(thumbnail); | ||
| thumbnails.appendChild(divThumbnail); | ||
| } | ||
| } | ||
|
|
||
| function closeLightbox() { | ||
| document.getElementById("lightbox").style.display = "none"; | ||
| } | ||
|
|
||
| // Function to navigate to a specific slide | ||
| function currentSlide(n) { | ||
| showSlides(slideIndex = n); | ||
| } | ||
|
|
||
| // Function to navigate to the next/previous slide | ||
| function plusSlides(n) { | ||
| showSlides(slideIndex += n); | ||
| } | ||
|
|
||
| // Function to display the current slide | ||
| function showSlides(n) { | ||
| var i; | ||
| var slides = document.getElementsByClassName("step-slides"); | ||
| var gallery = document.getElementsByClassName("gallery"); | ||
| var captionText = document.getElementById("caption"); | ||
|
|
||
| // Wrap around if index is out of bounds | ||
| if (n > slides.length) { slideIndex = 1 } | ||
| if (n < 1) { slideIndex = slides.length } | ||
|
|
||
| // Hide all slides | ||
| for (i = 0; i < slides.length; i++) { | ||
| slides[i].style.display = "none"; | ||
| } | ||
|
|
||
| // Remove active class from all thumbails of the gallery | ||
| for (i = 0; i < gallery.length; i++) { | ||
| gallery[i].className = gallery[i].className.replace(" active", ""); | ||
| } | ||
|
|
||
| // Show the current slide and add active class to the current dot | ||
| slides[slideIndex - 1].style.display = "block"; | ||
| gallery[slideIndex - 1].className += " active"; | ||
| captionText.innerHTML = gallery[slideIndex - 1].alt; | ||
| } | ||
|
|
||
| // Attach event listener to the lightbox | ||
| var lightbox = document.getElementById("lightbox"); | ||
| lightbox.addEventListener("click", function (event) { | ||
| // Check if the click target is the lightbox itself | ||
| if (event.target === lightbox) { | ||
| closeLightbox(); | ||
| } | ||
| }); | ||
|
|
||
| // Prevent closing on content click | ||
| var lightboxContent = document.querySelector(".lightbox-content"); | ||
| lightboxContent.addEventListener("click", function (event) { | ||
| event.stopPropagation(); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.