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");
+let expandBtn = document.getElementById("expand");
// Global state
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");
+}
+expandBtn.addEventListener("click", expand);
+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;
}
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.maxHeight = slides[0].offsetHeight.toString() + "px";
+ // Set image height
+ slides[i].getElementsByTagName("img")[0].style.maxHeight = (firstSlideHeight - captionHeight).toString() + "px";
+ }
+}
+
function nextSlide() {
// Go to the next slide
if (currentSlide == maxIndex) {
}
}
+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);
// Play immediately despite mouseover
stateBtn.innerHTML = STATE_PAUSE;
timeout = setTimeout(playSlideshow, INTERVAL);
+ stateBtn.title = "Pause";
}
else {
// Pause until user presses play again
clearTimeout(timeout); // make sure timer is stopped
timeout = null;
stateBtn.innerHTML = STATE_PLAY;
+ stateBtn.title = "Play";
}
paused = !paused;
}
+
+function expand() {
+ // Open the image in a new tab
+ window.open(slides[currentSlide].getElementsByTagName('img')[0].src, 'blank');
+}