diff options
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); |