From 3b3736644143139ce537d9fde03a91a3587c017a Mon Sep 17 00:00:00 2001 From: Andrew Lorimer Date: Sat, 20 Aug 2022 19:54:34 +1000 Subject: [PATCH] add expand button, change image height to max-height --- README.md | 18 +++++++++++++----- slideshow.css | 21 +++++++++++++++++---- slideshow.html | 14 +++++++++++--- slideshow.js | 13 +++++++++++-- 4 files changed, 52 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index 383134a..0f942fc 100644 --- a/README.md +++ b/README.md @@ -1,21 +1,29 @@ # Simple JavaScript Slideshow -This is a very basic slideshow made in JavaScript - no jQuery or other libraries. +This is a very basic slideshow made in JavaScript - no jQuery or other +libraries. -See slideshow.html for an example. To use, insert the HTML structure and link slideshow.css and slideshow.js. +See slideshow.html for an example. To use, insert the HTML structure and link +slideshow.css and slideshow.js. ## Features -- Auto advance (default 3 seconds, but you can change `INTERVAL` in slideshow.js or in the HTML) +- Auto advance (default 3 seconds, but you can change `INTERVAL` in + slideshow.js or in the HTML) - Pause on hover and manual pause - Scroll through slides with buttons or dot indicator at bottom - Captions -- Semantic HTML (each slide is a `
` consisting of an `` and `
`) +- Semantic HTML (each slide is a `
` consisting of an `` and + `
`) - Sensible behaviour when JS is disabled (static first slide) -- Works with different sizes/aspect ratios and different length captions (set width or max-width of outer div, then slide heights are driven by the the height of the first slide at full width) +- Works with different sizes/aspect ratios and different length captions (set + width or max-width of outer div, then slide heights are driven by the the + height of the first slide at full width) - Works well at all screen sizes and can be styled with basic CSS ## Todo - Initialise slideshows with JS object - Support for multiple slideshows per page +- Fix issue where images appear small when advancing slideshow manually without + first automatically advancing diff --git a/slideshow.css b/slideshow.css index 3cd4ce0..be5c4b3 100644 --- a/slideshow.css +++ b/slideshow.css @@ -57,7 +57,7 @@ figure.slide img { * Buttons */ -#prev, #next, #state { +#prev, #next, #state, #expand { cursor: pointer; font-weight: bold; font-size: 1.5em; @@ -74,17 +74,29 @@ figure.slide img { padding: 16px; } -#state { +#state, #expand { width: 1.5em; height: 1.5em; + line-height: 1.5em; text-align: center; font-family: monospace; top: 15px; - right: 15px; padding: 4px; border-radius: 3px; } +#state { + right: 15px; +} + +#expand { + right: calc(15px + 15px + 1.5em); +} + +#expand svg path { + fill: #fff; +} + #prev { left: 0; border-radius: 0 3px 3px 0; @@ -98,13 +110,14 @@ figure.slide img { div.slideshow:hover #prev, div.slideshow:hover #next, +div.slideshow:hover #expand, div.slideshow:hover #state { /* Show buttons on slideshow hover */ opacity: 100; background-color: rgba(0,0,0,0.3); } -#prev:hover, #next:hover, #state:hover { +#prev:hover, #next:hover, #expand:hover, #state:hover { /* Button hover */ background-color: rgba(0,0,0,0.8) !important; } diff --git a/slideshow.html b/slideshow.html index 8896456..b4099eb 100644 --- a/slideshow.html +++ b/slideshow.html @@ -26,9 +26,17 @@ - - - ⏸︎ + + + + + + + + + + + ⏸︎
diff --git a/slideshow.js b/slideshow.js index 80614c9..cccf2ee 100644 --- 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'); +} -- 2.43.2