add expand button, change image height to max-height

diff --git a/slideshow.js b/slideshow.js
index 80614c9a2562df2ff0194c336883da268f6220d2..cccf2ee2cb900323fa5da46630d6fe1bc132de61 100644 (file)
--- a/slideshow.js
+++ b/slideshow.js
@@ -13,6 +13,7 @@ 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;
@@ -29,6 +30,7 @@ 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;
@@ -72,9 +74,9 @@ function setHeights() {
   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";
+    slides[i].style.maxHeight = slides[0].offsetHeight.toString() + "px";
     // Set image height
-    slides[i].getElementsByTagName("img")[0].style.height = (firstSlideHeight - captionHeight).toString() + "px";
+    slides[i].getElementsByTagName("img")[0].style.maxHeight = (firstSlideHeight - captionHeight).toString() + "px";
   }
 }
 
@@ -121,12 +123,19 @@ function changeState() {
     // 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');
+}