Javascript image lightbox gallery transalte from inline script

Question

My script is working or the script from w3schools, but I want to use it many times on diffrent gallerys/pages and therefore I need help to transalte the script to a function, so that I do not have to repeat myself many times.

Someone told me it is bad practices to use javascript onclick functions or functions in html and I have to avoid them.

function openModal() {
    document.getElementById("myModal").style.display = "block";
  }

  function closeModal() {
    document.getElementById("myModal").style.display = "none";
  }

  var slideIndex = 1;
  showSlides(slideIndex);

  function plusSlides(n) {
    showSlides((slideIndex += n));
  }

  function currentSlide(n) {
    showSlides((slideIndex = n));
  }

  function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("demo");
    var captionText = document.getElementById("caption");
    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";
    captionText.innerHTML = dots[slideIndex - 1].alt;
  }

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-size: 20px;
}

/***********************************************
  TEMPLATE CONTAINER
***********************************************/
.container {
  display: grid;
  height: 100vh;
  margin: 0 auto;
  grid-template-columns: 1fr;
  grid-template-areas:
    "header"
    "main"
    "footer";
}

main {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "slug-wrapper"
    "img-shadow"
    "category-box"
    "row"
}

.img-shadow {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "main-content-2"
    "main-content"
    "main-content-3"
    "main-content-4"
    "main-content-5"
    "main-content-6";
}

.row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "category-box"
    "image-wrapper-1"
    "image-wrapper-2"
    "image-wrapper-3";
}

.row {
  grid-area: row;
}

.category-box {
  grid-area: category-box;
}

/* Main Container */
header {
  grid-area: header;
  background-color: white;
  text-align: center;
  z-index: -3;
}

main {
  grid-area: main;
  text-align: center;
  padding: 30px;
}

footer {
  text-align: center;
  grid-area: footer;
  background-color: cornflowerblue;
}

/* Image Gallery */
.category-box {
  background-color: var(--secondary);
  color: white;
  margin-top: 55px;
  grid-area: category-box;
}

.image-slide {
  width: 100%;
}

.demo {
  width: 100%;
}

.image-wrapper-1 {
  grid-area: image-wrapper-1;
  margin-bottom: 35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.image-wrapper-2 {
  grid-area: image-wrapper-2;
  margin-bottom: 35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.image-wrapper-3 {
  grid-area: image-wrapper-3;
  margin-bottom: 35px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}



/***********************************************
  IMAGE - GALLERY
***********************************************/
.row > .column {
  padding: 0 8px;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

.column {
  float: left;
  width: 25%;
}

/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 555;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}

/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}

.mySlides {
  display: none;
}

.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

img {
  margin-bottom: -4px;
}

.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}

.demo {
  opacity: 0.6;
}

.active,
.demo:hover {
  opacity: 1;
}

.hover-shadow {
  width: 100%;
  height: 100%;
}

img.hover-shadow {
  transition: 0.3s;
}

.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  /* TEMPLATE CONTAINER */
  .container {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      "header header header header header header header header"
      "main main main main main main main main"
      "footer footer footer footer footer footer footer footer";
  }

  main {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-gap: 10px;
    grid-template-areas:
      "row row row row row row row row"
      "slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper"
      "img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow";
  }

  .row {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-areas:
      ". . category-box category-box category-box category-box . ."
      ". . image-wrapper-1 image-wrapper-1 image-wrapper-1 image-wrapper-1 . ."
      ". . image-wrapper-2 image-wrapper-2 image-wrapper-2 image-wrapper-2 . ."
      ". . image-wrapper-3 image-wrapper-3 image-wrapper-3 image-wrapper-3 . .";
  }
  
  
  /* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

  /* TEMPLATE CONTAINER */
  .container {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "header header header header header header header header header header header header"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }

  main {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "row row row row row row row row row row row row"
      "slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper"
      "img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow";
  }

  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 25px;
    grid-template-areas:
      ". category-box category-box category-box category-box category-box image-wrapper-1 image-wrapper-1 image-wrapper-1 image-wrapper-1 image-wrapper-1 ."
      ". image-wrapper-2 image-wrapper-2 image-wrapper-2 image-wrapper-2 image-wrapper-2 image-wrapper-3 image-wrapper-3 image-wrapper-3 image-wrapper-3 image-wrapper-3 .";
  }
  
  .image-wrapper-1,
  .image-wrapper-2,
  .image-wrapper-3 {
    margin-bottom: 0;
  }
  
   .category-box {
    margin-top: 0;
    align-content: center;
    text-align: center;
  }
  
  /* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  /* IMAGES */
  .card:hover {
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0 5px 20px 0 rgba(0, 0, 0, 0.2);
    transition-delay: 0;
  }
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  /* TEMPLATE CONTAINER */
  .container {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "header header header header header header header header header header header header"
      "main main main main main main main main main main main main"
      "footer footer footer footer footer footer footer footer footer footer footer footer";
  }

  main {
    display: grid;
    grid-gap: 25px;
    grid-template-columns: repeat(12, 1fr);
    grid-template-areas:
      "row row row row row row row row row row row row"
      "slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper slug-wrapper"
      "img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow img-shadow";
  }

  .row {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-gap: 25px;
    grid-template-areas: ". category-box category-box image-wrapper-1 image-wrapper-1 image-wrapper-2 image-wrapper-2 image-wrapper-3 image-wrapper-3 . . .";
  }
/* IMAGES */
  .card-headline {
    padding: 0;
  }

  .logo-link {
    width: 100%;
    height: 100%;
  }

<div class="row">
  <div class="category-box">
    <h2 class="box-headline">Inexorablez</h2>
  </div>

  <div class="image-wrapper-1">
    <img
      src="https://picsum.photos/id/6/360/260"
      onclick="openModal();currentSlide(1)"
      class="hover-shadow cursor"
    />
  </div>
  <div class="image-wrapper-2">
    <img
      src="https://picsum.photos/id/8/360/260"
      onclick="openModal();currentSlide(2)"
      class="hover-shadow cursor"
    />
  </div>
  <div class="image-wrapper-3">
    <img
      src="https://picsum.photos/id/10/360/260"
      onclick="openModal();currentSlide(3)"
      class="hover-shadow cursor"
    />
  </div>
</div>

<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">&times;</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 3</div>
      <img
        class="image-slide"
        src="https://picsum.photos/id/6/600/350"
      />
    </div>

    <div class="mySlides">
      <div class="numbertext">2 / 3</div>
      <img
        class="image-slide"
        src="https://picsum.photos/id/8/600/350"
      />
    </div>

    <div class="mySlides">
      <div class="numbertext">3 / 3</div>
      <img
        class="image-slide"
        src="https://picsum.photos/id/10/600/350"
      />
    </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
    <a class="next" onclick="plusSlides(1)">&#10095;</a>

    <div class="caption-container">
      <p id="caption"></p>
    </div>

    <div class="column">
      <img
        class="demo cursor"
        src="https://picsum.photos/id/6/600/350"
        onclick="currentSlide(1)"
        alt="Inerorablez #1"
      />
    </div>
    <div class="column">
      <img
        class="demo cursor"
        src="https://picsum.photos/id/8/600/350"
        onclick="currentSlide(2)"
        alt="Inerorablez #2"
      />
    </div>
    <div class="column">
      <img
        class="demo cursor"
        src="https://picsum.photos/id/10/600/350"
        onclick="currentSlide(3)"
        alt="Inerorablez #3"
      />
    </div>
  </div>
</div>

Would be nice, if someone can help me to translate it.