Gallery with miniature images on js

[fbio]

I don't know how to make it open instead of a big one with a JS.

[irl]

Example https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp

var slideIndex = 1;
showSlides(slideIndex);
function currentSlide(n) {

showSlides(slideIndex = n);

}
function showSlides(n) {

var i;

var slides = document.getElementsByClassName("mySlides");

var dots = document.getElementsByClassName("demo");

if (n > slides.length) {slideIndex = 1}

if (n < 1) {slideIndex = slides.length}

for (i = 0; i < slides.length; i++) {

slides[i].style.display = "none";

}

for (i = 0; i < dots.length; i++) {

dots[i].className = dots[i].className.replace(" active", "");

}

slides[slideIndex-1].style.display = "block";

dots[slideIndex-1].className += " active";

}

* {

box-sizing: border-box;

}

.container {

position: relative;

}

.mySlides {

display: none;

}

.cursor {

cursor: pointer;

}

.row:after {

content: "";

display: table;

clear: both;

}

.column {

float: left;

width: 16.66%;

}

.demo {

opacity: 0.6;

}

.active,

.demo:hover {

opacity: 1;

}

<div class="container">

<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%">

</div>

<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">

</div>
<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

</div>
<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

</div>
<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%">

</div>
<div class="mySlides">

<img src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%">

</div>
<div class="row">

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_lights_wide.jpg" style="width:100%" onclick="currentSlide(1)" alt="The Woods">

</div>

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%" onclick="currentSlide(2)" alt="Cinque Terre">

</div>

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(3)" alt="Mountains and fjords">

</div>

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(4)" alt="Northern Lights">

</div>

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_5terre_wide.jpg" style="width:100%" onclick="currentSlide(5)" alt="Nature and sunrise">

</div>

<div class="column">

<img class="demo cursor" src="https://www.w3schools.com/howto/img_mountains_wide.jpg" style="width:100%" onclick="currentSlide(6)" alt="Snowy Mountains">

</div>

</div>

</div>