add expand button, change image height to max-height

diff --git a/README.md b/README.md
index 383134a294cefdb68d67d3b24313eeada93aa449..0f942fc203f69775e32d7314fba7c303f4fe5775 100644 (file)
--- 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 `<figure>` consisting of an `<img>` and `<figcaption>`)
+- Semantic HTML (each slide is a `<figure>` consisting of an `<img>` and
+  `<figcaption>`)
 - 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 3cd4ce095beee09dded899b55c5d0db2da612c39..be5c4b3ac045ec2707265281ad4d9311cd3e7c2a 100644 (file)
--- 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 88964561d2f7f110e77e7f43cc82d715706c5188..b4099eb078a0163b5cd966c9ee30ff2a47f8cd55 100644 (file)
--- a/slideshow.html
+++ b/slideshow.html
@@ -26,9 +26,17 @@
 
       </div>
 
-      <a id="prev">&#10094;</a>
-      <a id="next">&#10095;</a>
-      <a id="state">&#x23f8;&#xFE0E;</a>
+      <a id="prev" title="Previous image">&#10094;</a>
+      <a id="next" title="Next image">&#10095;</a>
+      <a id="expand" title="View in new tab">
+        <svg version="1.1" viewBox="0 0 36 36">
+          <path d="m 10,16 2,0 0,-4 4,0 0,-2 L 10,10 l 0,6 0,0 z"></path>
+          <path d="m 20,10 0,2 4,0 0,4 2,0 L 26,10 l -6,0 0,0 z"></path>
+          <path d="m 24,24 -4,0 0,2 L 26,26 l 0,-6 -2,0 0,4 0,0 z"></path>
+          <path d="M 12,20 10,20 10,26 l 6,0 0,-2 -4,0 0,-4 0,0 z"></path>
+        </svg>
+      </a>
+      <a id="state" title="Pause">&#x23f8;&#xFE0E;</a>
 
       <div id="controls">
         <span class="dot"></span>

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');
+}