This is a long caption which will probably span over multiple lines (depending on the width of the slideshow). You will see that that the height of the image adjusts to accommodate the taller caption.

- ❮ - ❯ - ⏸︎ +

+ + ❮ + ❯ + ⏸︎

- - - + + +

diff --git a/slideshow.js b/slideshow.js index f73a888..80614c9 100644 --- a/slideshow.js +++ b/slideshow.js @@ -7,6 +7,9 @@ const STATE_PLAY = "⏵︎"; let currentSlide = -1; // Elements + +let slideshow = document.getElementsByClassName("slideshow")[0]; +let container = document.getElementsByClassName("slides")[0]; let slides = document.getElementsByClassName("slide"); let dots = document.getElementsByClassName("dot"); let stateBtn = document.getElementById("state"); @@ -16,21 +19,37 @@ let maxIndex = slides.length - 1; var timeout; var paused = false; +// Set up event listeners +window.addEventListener("resize", setHeights, true); +slideshow.addEventListener("mouseenter", mouseEnter, true); +slideshow.addEventListener("mouseleave", mouseLeave, true); +document.getElementById("prev").addEventListener("click", prevSlide); +document.getElementById("next").addEventListener("click", nextSlide); +document.getElementById("state").addEventListener("click", changeState); +if (dots.length - 1 != maxIndex) { + console.log("Number of control dots does not match number of slides"); +} +for (i = 0; i <= dots.length - 1; i++) { + dots[i].addEventListener("click", goToSlide); + dots[i].slide = i; +} + + // Start the slideshow playSlideshow(); // Recursive function that advances the slide and then calls itself with a // delay function playSlideshow() { + setHeights(); nextSlide(); timeout = setTimeout(playSlideshow, INTERVAL); } // Change the slide to a given index function setSlide(slide) { - if (slide < 0 || slide > maxIndex) { - console.log("Attempted to change to slide outside range"); + console.log("Attempted to change to slide outside range (" + slide.toString() + ")"); return; } @@ -47,6 +66,18 @@ function setSlide(slide) { currentSlide = slide; } +function setHeights() { + var firstSlideHeight = slides[0].offsetHeight; + // Set heights (based on height of first slide with 100% width) + for (i = 1; i <= maxIndex; i++) { + var captionHeight = slides[i].getElementsByTagName("figcaption")[0].offsetHeight; + // Set figure height + slides[i].style.height = slides[0].offsetHeight.toString() + "px"; + // Set image height + slides[i].getElementsByTagName("img")[0].style.height = (firstSlideHeight - captionHeight).toString() + "px"; + } +} + function nextSlide() { // Go to the next slide if (currentSlide == maxIndex) { @@ -67,6 +98,11 @@ function prevSlide() { } } +function goToSlide(evt) { + // Go to a slide specified by the event (called when the dots are clicked) + setSlide(evt.currentTarget.slide); +} + function mouseEnter() { // Pause the slideshow clearTimeout(timeout); diff --git a/test-img/1.jpg b/test-img/1.jpg index bab2280..ffff16d 100644 Binary files a/test-img/1.jpg and b/test-img/1.jpg differ diff --git a/test-img/2.jpg b/test-img/2.jpg index b3f3d4c..69dbb01 100644 Binary files a/test-img/2.jpg and b/test-img/2.jpg differ diff --git a/test-img/3.jpg b/test-img/3.jpg index f93f45c..3fdd8f8 100644 Binary files a/test-img/3.jpg and b/test-img/3.jpg differ