Looking for help with a javascript gallery. I need to change the image using arrow keys after opening the modal popup. Left arrow key should move the image to the left and right arrow key to the right. Any assistance would be greatly appreciated as I'm still new to JavaScript. Please check out the code snippet in full view.
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";
}
slides[slideIndex - 1].style.display = "block";
captionText.innerHTML = this.alt;
}.modal {
width: 58%;
height: 100%;
top: 0;
position: fixed;
display: none;
background-color: rgba(22, 22, 22, 0.5);
margin-left: 300px;
max-width: 779px;
min-width: 779px;
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
.mySlides {
display: none;
}
.close {
position: relative;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
left: 584px;
top: 90px;
}
.close:hover,
.close:focus {
color: #999;
text-decoration: none;
cursor: pointer;
}
.mySlides {
display: none;
}
.cursor {
cursor: pointer;
}
.cursor {
cursor: pointer;
}
.prev {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: -10%;
}
.next {
cursor: pointer;
position: relative;
top: -149px;
padding: 16px;
margin-top: -50px;
color: white;
font-weight: bold;
font-size: 20px;
border-radius: 0 3px 3px 0;
user-select: none;
-webkit-user-select: none;
left: 600px;
}<tr>
<div class="row">
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x900" width="250" height="164" onclick="openModal();currentSlide(1)" class="hover-shadow cursor"></p>
</td>
</div>
<div class="column">
<td>
<p align="center"><img src="https://source.unsplash.com/collection/190727/1600x910" width="250" height="164" onclick="openModal();currentSlide(2)" class="hover-shadow cursor"></p>
</td>
</div>
</tr>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close cursor" onclick="closeModal()">×</span>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x900" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<div class="mySlides">
<img src="https://source.unsplash.com/collection/190727/1600x910" style="width: 98%;
position: relative;
left: 10px;
top: 109px;">
<p id="caption" style="padding-bottom: 7px;font-size: 17px;">Annual function</p>
</div>
<a class="prev" id="prev1" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>