Five Image Gallery

by zircon

HTML

<!-- Five image gallery designed to fit onto a single page within an epub. This is forked from a www.CSSscripts.com example at (https://codepen.io/huijing/pen/GvNLJm?editors=11000).

Only certain eReaders render gallery accurately. 
Successful eReaders are: Aldiko on Android. 
Keeps design shape: ADE, Pocketbook (but non-functional). 
Some eReaders render the images as full page images (which is a good fallback option): Moon+, ReadEra.
-->
<div class="gallery-wrap">

<div class="container">
  <div class="containment">
  <ul class="slides">
	<div class="content">
    <li id="slide1"><img src="https://placehold.co/150x250.png?text=1" alt="1"/></li>
	</div>
	<div class="content">
    <li id="slide2"><img src="https://placehold.co/150x250.png?text=2" alt="2"/></li>
	</div>
	<div class="content">
    <li id="slide3"><img src="https://placehold.co/150x250.png?text=3" alt="3"/></li>
	</div>
	<div class="content">
    <li id="slide4"><img src="https://placehold.co/150x250.png?text=4" alt="4"/></li>
	</div>
	<div class="content">
    <li id="slide5"><img src="https://placehold.co/150x250.png?text=5" alt="5"/></li>
	</div>
  </ul>
  </div><!--end containment-->
  
  <ul class="thumbnails">
    <li><a href="#slide1"><img src="https://placehold.co/150x250.png?text=1"/></a></li>
    <li><a href="#slide2"><img src="https://placehold.co/150x250.png?text=2"/></a></li>
    <li><a href="#slide3"><img src="https://placehold.co/150x250.png?text=3"/></a></li>
    <li><a href="#slide4"><img src="https://placehold.co/150x250.png?text=4"/></a></li>
    <li><a href="#slide5"><img src="https://placehold.co/150x250.png?text=5"/></a></li>
  </ul>
</div><!--end container-->

</div><!-- end gallery wrap -->

CSS

/* Five image gallery */
html {
  box-sizing: border-box;
  height: 100%;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

.gallery-wrap {margin: 0; padding: 0;}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(0,0,0);
  margin: 0;
  padding: 0;
}

div.container > ul.thumbnails a {
  border: 1px solid #000;
  border-right: none;
  border-left: none;
}

.container ul li {
  list-style-type: none;
  background-color: #000; /* add color to mask all images behind the active image */
}

.slides {
  overflow: hidden;
  width: 70vw;
  height: 100vh;
}

.slides li {
  width: 70vw; /* yes */
  height: 100vh; /* yes */
  position: absolute;
  z-index: 1;
}

.slides img {
  height: 100vh;
  /* object-fit: cover; */
  object-fit: contain;
  object-position: center;
}

.slides li:target {
  z-index: 3;
}

.slides li:not(:target) {
}

/* Keep all large images stacked as layers exactly on top of each other */
.containment {
  position: relative;
  margin: 0;
}

.containment img {
  vertical-align: middle;
  width: 100%;
  margin: 0;
}

.content {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  padding: 0;
  margin: 0;
}

/* thumbnails setup */
.thumbnails {
  display: flex;
  flex-direction: column;
  line-height: 0;
}

.thumbnails li {
  flex: auto;
}

.thumbnails img {
  width: 30vw;
  height: 19.5vh;
  /* object-fit: cover; */
  object-fit: contain;
  object-position: top;
  aspect-ratio: auto;
  aspect-ratio: 0/0;
}

.thumbnails a, .thumbnails span {
  display: block;
  cursor: pointer;
  /* vertical-align: middle; */
  background: #222;
  border: 0px solid #aaa;
}

a:focus, a:hover, .button:hover {
  background: rgb(100,100,100);
}