<body>
- <div class="slideshow" onmouseenter="mouseEnter()" onmouseleave="mouseLeave()">
+ <div class="slideshow">
+ <div class="slides">
- <figure class="slide">
- <img src="test-img/1.jpg">
- <figcaption><span>This is a long caption yeah yeah yeah</figcaption>
- </figure>
+ <figure class="slide">
+
<img src="test-img/1.jpg">
+ <figcaption>This is a caption</figcaption>
+ </figure>
- <figure class="slide">
- <img src="test-img/2.jpg">
- <figcaption><span>Shorter caption</figcaption>
- </figure>
+ <figure class="slide">
+
<img src="test-img/2.jpg">
+ <figcaption><span>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.</figcaption>
+ </figure>
- <figure class="slide">
- <img src="test-img/3.jpg">
- <figcaption><span>Caption 3</figcaption>
- </figure>
+ <figure class="slide">
+
<img src="test-img/3.jpg">
+ <figcaption>Caption 3</figcaption>
+ </figure>
- <a id="prev" onclick="prevSlide()">❮</a>
- <a id="next" onclick="nextSlide()">❯</a>
- <a id="state" onclick="changeState()">⏸︎</a>
+ </div>
+
+ <a id="prev" title="Previous image">❮</a>
+ <a id="next" title="Next image">❯</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">⏸︎</a>
<div id="controls">
- <span class="dot" onclick="setSlide(0)"></span>
- <span class="dot" onclick="setSlide(1)"></span>
- <span class="dot" onclick="setSlide(2)"></span>
+ <span class="dot"></span>
+ <span class="dot"></span>
+ <span class="dot"></span>
</div>
</div>