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