| 1 | function create_galleries() { |
| 2 | let galleries = document.querySelectorAll(".gallery") |
| 3 | for (let gallery of galleries) { |
| 4 | // create thumbnail thing |
| 5 | let gallery_thumbnails = document.createElement("div") |
| 6 | gallery_thumbnails.classList.add("gallery-thumbnails") |
| 7 | gallery.prepend(gallery_thumbnails) |
| 8 |
|
| 9 | let figures = gallery.querySelectorAll("figure") |
| 10 | for (let figure of figures) { |
| 11 | let figure_image = figure.querySelector("img, video").src |
| 12 |
|
| 13 | let thumbnail = document.createElement("button") |
| 14 | thumbnail.classList.add("gallery-thumbnail") |
| 15 | thumbnail.style.backgroundImage = "url(" + figure_image + ")" |
| 16 | thumbnail.target_gallery = gallery |
| 17 | thumbnail.target_figure = figure |
| 18 | gallery_thumbnails.append(thumbnail) |
| 19 |
|
| 20 | thumbnail.addEventListener('click', gallery_thumbnail_click) |
| 21 | } |
| 22 | gallery.active_figure_thumbnail = gallery_thumbnails.children[0] |
| 23 | gallery.active_figure_thumbnail.classList.add("active") |
| 24 | gallery.active_figure = figures[0] |
| 25 | gallery.active_figure.classList.add("active") |
| 26 | } |
| 27 | } |
| 28 |
|
| 29 | function gallery_thumbnail_click(event) { |
| 30 | let el = event.currentTarget |
| 31 |
|
| 32 | el.target_gallery.active_figure_thumbnail.classList.remove("active") |
| 33 | el.target_gallery.active_figure.classList.remove("active") |
| 34 |
|
| 35 | el.target_gallery.active_figure_thumbnail = el |
| 36 | el.target_gallery.active_figure_thumbnail.classList.add("active") |
| 37 | el.target_gallery.active_figure = el.target_figure |
| 38 | el.target_gallery.active_figure.classList.add("active") |
| 39 | } |
| 40 |
|
| 41 | document.addEventListener('DOMContentLoaded', create_galleries) |
| 42 |
|
Index