Image gallery in HTML with JS and CSS

Question

I'm trying to make an image gallery with HTML, CSS and JS. The CSS works but there is a problem with the JS. I've made it so you can either click on an image or click on a button to see all of the images in order. But if I click on the third or fourth image and click the L button (stands for LEFT) it jumps from that image to the first image. For some reason it just doesn't want to show the second image.

I've been trying to fix this for hours and it still doesn't work as it should.

 var num = 0; function elementID(indexes) { var index = $(".images").index(indexes); var num = index; } function myFunction(imgs) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = imgs.src; expandImg.parentElement.style.display = "block"; } function right() { if (num >= document.getElementsByClassName('images').length - 1) { num = document.getElementsByClassName('images').length - 1; } else { num++; } var expandImg2 = document.getElementById("expandedImg"); var image = document.getElementsByClassName('images')[num]; expandImg2.src = image.src; } function left() { if (num <= 0) { num++; return false; } else { num--; } var expandImg2 = document.getElementById("expandedImg"); var image = document.getElementsByClassName('images')[num]; expandImg2.src = image.src; } 

 * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } /* The grid: Four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; } /* Style the images inside the grid */ .column img { opacity: 0.8; cursor: pointer; } .column img:hover { opacity: 1; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* The expanding image container */ .container { position: relative; display: none; } /* Expanding image text */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* Closable button inside the expanded image */ .closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a> </div> <!-- The four columns --> <div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images" onclick="myFunction(this);elementID(this);"> </div> </div> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div> 

Answer 1

Try this solution using the next() and prev() from jQuery.

 var currentEl; // track current el $(document).ready(() => { $('.column').on('click', function() { // bind clicks currentEl = this; addImage($(this).find('img')); }); $('.closebtn').on('click', function() { // bind clicks to close button currentEl = undefined; // either you can do this to reset the flow, or comment to maintain the flow }); }); function addImage(img) { var expandImg = document.getElementById("expandedImg"); var imgText = document.getElementById("imgtext"); expandImg.src = img[0].src; expandImg.parentElement.style.display = "block"; } function right() { // jump to next var next = currentEl ? $(currentEl).next() : $('.column').first(); if (next.length > 0) { addImage($(next).find('img')); currentEl = next; } } function left() { // jump to prev var prev = currentEl ? $(currentEl).prev() : $('.column').first(); if (prev.length > 0) { addImage($(prev).find('img')); currentEl = prev; } } 

 * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } /* The grid: Four equal columns that floats next to each other */ .column { float: left; width: 25%; padding: 10px; } /* Style the images inside the grid */ .column img { opacity: 0.8; cursor: pointer; } .column img:hover { opacity: 1; } /* Clear floats after the columns */ .row:after { content: ""; display: table; clear: both; } /* The expanding image container */ .container { position: relative; display: none; } /* Expanding image text */ #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } /* Closable button inside the expanded image */ .closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p><a onclick="left();" id="left">L</a> | <a onclick="right();" id="right">R</a> </div> <!-- The four columns --> <div class="row"> <div class="column"> <img src="https://www.w3schools.com/howto/img_nature.jpg" alt="Nature" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_mountains.jpg" alt="Mountains" style="width:100%" class="images"> </div> <div class="column"> <img src="https://www.w3schools.com/howto/img_lights.jpg" alt="Lights" style="width:100%" class="images"> </div> </div> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div>