diff options
| author | Volpeon <git@volpeon.ink> | 2022-06-16 10:05:59 +0200 |
|---|---|---|
| committer | Volpeon <git@volpeon.ink> | 2022-06-16 10:05:59 +0200 |
| commit | b4444941222ce6d12613c9e97ad64b7a345ff3c8 (patch) | |
| tree | 167005a56956b2643bda3cf477bcbca868683b19 /content/main.js | |
| parent | Update (diff) | |
| download | volpeon.ink-b4444941222ce6d12613c9e97ad64b7a345ff3c8.tar.gz volpeon.ink-b4444941222ce6d12613c9e97ad64b7a345ff3c8.tar.bz2 volpeon.ink-b4444941222ce6d12613c9e97ad64b7a345ff3c8.zip | |
Update
Diffstat (limited to 'content/main.js')
| -rw-r--r-- | content/main.js | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/content/main.js b/content/main.js index 760d40a..c843947 100644 --- a/content/main.js +++ b/content/main.js | |||
| @@ -32,7 +32,7 @@ | |||
| 32 | const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); | 32 | const lightboxNextEl = lightboxEl.querySelector(".o-lightbox__next-btn"); |
| 33 | const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); | 33 | const lightboxImgEl = lightboxEl.querySelector(".o-lightbox__img"); |
| 34 | const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); | 34 | const lightboxFooterEl = lightboxEl.querySelector(".o-lightbox__footer"); |
| 35 | const figureEls = Array.from(mainEl.querySelectorAll("figure")).map(el => el.querySelector("a")); | 35 | const figureEls = Array.from(mainEl.querySelectorAll("figure")); |
| 36 | 36 | ||
| 37 | const show = () => { | 37 | const show = () => { |
| 38 | visible = true; | 38 | visible = true; |
| @@ -47,7 +47,7 @@ | |||
| 47 | const setIndex = (i) => { | 47 | const setIndex = (i) => { |
| 48 | thumbnailEls[currentIndex].classList.remove("is-selected"); | 48 | thumbnailEls[currentIndex].classList.remove("is-selected"); |
| 49 | currentIndex = i; | 49 | currentIndex = i; |
| 50 | lightboxImgEl.src = figureEls[i].href; | 50 | lightboxImgEl.src = figureEls[i].firstElementChild.href; |
| 51 | thumbnailEls[i].classList.add("is-selected"); | 51 | thumbnailEls[i].classList.add("is-selected"); |
| 52 | }; | 52 | }; |
| 53 | 53 | ||
| @@ -70,13 +70,29 @@ | |||
| 70 | setIndex(i); | 70 | setIndex(i); |
| 71 | }; | 71 | }; |
| 72 | 72 | ||
| 73 | figureEl.addEventListener("click", go); | 73 | let anchorEl; |
| 74 | let imgEl; | ||
| 75 | |||
| 76 | if (figureEl.firstElementChild.tagName === "A") { | ||
| 77 | anchorEl = figureEl.firstElementChild; | ||
| 78 | imgEl = anchorEl.firstElementChild; | ||
| 79 | } else { | ||
| 80 | imgEl = figureEl.firstElementChild; | ||
| 81 | anchorEl = document.createElement("a"); | ||
| 82 | anchorEl.href = imgEl.src; | ||
| 83 | |||
| 84 | figureEl.insertBefore(anchorEl, imgEl); | ||
| 85 | figureEl.removeChild(imgEl); | ||
| 86 | anchorEl.appendChild(imgEl); | ||
| 87 | } | ||
| 88 | |||
| 89 | anchorEl.addEventListener("click", go); | ||
| 74 | 90 | ||
| 75 | const thumbnailButtonEl = document.createElement("button"); | 91 | const thumbnailButtonEl = document.createElement("button"); |
| 76 | const thumbnailImgEl = document.createElement("img"); | 92 | const thumbnailImgEl = document.createElement("img"); |
| 77 | 93 | ||
| 78 | thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); | 94 | thumbnailImgEl.classList.add("o-lightbox__thumbnail-img"); |
| 79 | thumbnailImgEl.src = figureEl.href; | 95 | thumbnailImgEl.src = anchorEl.href; |
| 80 | 96 | ||
| 81 | thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); | 97 | thumbnailButtonEl.classList.add("o-lightbox__thumbnail"); |
| 82 | thumbnailButtonEl.appendChild(thumbnailImgEl); | 98 | thumbnailButtonEl.appendChild(thumbnailImgEl); |
