Guys, please help write the control buttons for the portfolio. I want to use pure JS. There is such a code html
<div id="portfolio"> <h1>Некоторые примеры работ</h1> <!-- START IMAGE GaLLERY --> <!-- <h2 style="text-align:center">Advanced Image Gallery</h2> --> <div id="zoom"> <div class="responsive"> <div class="img"> <img src="img/tsagency.png" alt="tsagency" class="imgshow"> <div class="desc">TS agency</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/Photographer.png" alt="Photographer" class="imgshow"> <div class="desc">Photographer</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/Photographer2.png" alt="Photographer 2" class="imgshow"> <div class="desc">Photographer2</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/jewelry_shop.png" alt="jewelry_shop" class="imgshow"> <div class="desc">Jewelry shop</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/sitelightshop.png" alt="site lightshop" class="imgshow"> <div class="desc">Light shop</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/capcakes.png" alt="capcakes" class="imgshow"> <div class="desc">Kate Capcakes</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/A1velocity.png" alt="A1velocity" class="imgshow" > <div class="desc">A1 Velocity</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/1.png" alt="Who`s involved" class="imgshow" > <div class="desc">Who`s involved</div> </div> </div> <div class="responsive"> <div class="img"> <img src="img/2_photo design.png" alt="jewelry_shop" class="imgshow"> <div class="desc">Phoho design</div> </div> </div> <div class="clearfix"></div> <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">X</span> <img class="modal-content" id="img01"> <div id="caption"></div> </div> <!-- end OF image gallery --> </div><!-- id="zoom" --> </div><!--the end of id="portfolio" --> There is such a js code
<script type="text/javascript"> //image gallery // Get the modal var modal = document.getElementById('myModal'); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; } // Get all images and insert the clicked image inside the modal // Get the content of the image description and insert it inside the modal image caption var images = document.getElementsByClassName('imgshow'); var modalImg = document.getElementById("img01"); var captionText = document.getElementById("caption"); var i; for (i = 0; i < images.length; i++) { images[i].onclick = function(){ modal.style.display = "block"; modalImg.src = this.src; modalImg.alt = this.alt; captionText.innerHTML = this.nextElementSibling.innerHTML; } } </script> You need the function back and forth from the specified list of images. I do not want to take plugins, I read a lot of everything, revised it, all my options do not work.
