How to use the esc key to close lightbox page overlay - lightbox

Question

I have a question about a lightbox see my jsFiddle.
Clicking on one of the images opens a bigger version of the painting as a page overlay.
How to use the ESC key to close this page overlay?
And how to use the arrow keys to move to the next image?
What kind of jQuery plugin / javascript would I need to make this happen?
<ul class="lb-album">
<li>
<a href="#Fly-My-Pretties-Walled-Garden">
<img src="http://sandipa.com.au/images/works-for-sale/thumbs/Fly-my-Pretties-Walled-Garden-sm.jpg" alt="Fly My Pretties: Walled Garden">
<span>Fly My Pretties</span> </a>
<div class="lb-overlay" id="Fly-My-Pretties-Walled-Garden">
x Close
<img src="http://sandipa.com.au/images/2010-2011/1000px-wide/Fly-my-Pretties-Walled-Garden.jpg" alt="Fly My Pretties: Walled Garden">
<div>
<h3>Fly My Pretties: Walled Garden<span>mixed media on canvas</span></h3>
<p>72 x 137 cm</p>
Prev
Next
</div>
</div>
</li>
<li>
<a href="#Central-Highlands-Circle-of-Gold">
<img src="http://sandipa.com.au/images/works-for-sale/thumbs/Central-Highlands-Circle-of-Gold-sm.jpg" alt="Central Highlands: Circle of Gold">
<span>Circle of Gold</span> </a>
<div class="lb-overlay" id="Central-Highlands-Circle-of-Gold">
x Close
<img src="http://sandipa.com.au/images/works-for-sale/Central-Highlands-Circle-of-Gold.jpg" alt="Central Highlands: Circle of Gold">
<div>
<h3>Central Highlands: Circle of Gold<span>mixed media on canvas</span></h3>
<p>51 x 108 cm</p>
Prev
Next
</div>
</div>
</li>
</ul>

Answer 1

A full implementation of Pure Javascript Lightbox or Image Popup Modal is available in one my Answers at https://stackoverflow.com/a/67169851/8210884.
This Answer mentioned in the link above allows handling both the issues of Hiding Lightbox with ESC key as well as navigating through images in Lightbox using Left and Right arrow key.
Here are the Pieces of code from that Answer which will help us achieve these Two issues.
Hiding the Lightbox with ESC key :
if(event.keyCode==27){ // If ESC key is pressed
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
document.getElementById("lightbox-container").classList.remove("showcontainer");
}
}
Navigating through all the images on a Webpage in Lightbox with Left and Right Arrow key :
else if(event.keyCode==37) { // Left arrow key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(k=0;k<allimgurlarray.length;k++){
if(currimgsrc == allimgurlarray[k][2]){
serialofarray = allimgurlarray[k][0];
}
}
// with LEFT arrow, we are supposed to reduce the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray<=0){
serialofarray = allimgurlarray.length - 1;
}
else {
serialofarray = serialofarray - 1;
}
console.log("Left Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
else if(event.keyCode==39) { // Right Arrow Key
if(document.getElementById("lightbox-container").classList.contains("showcontainer")){
// first get the URL of image displayed in the LIGHT BOX
var currimgsrc = document.getElementById("lightbox-cont-img").getAttribute("src");
// now match the sequence number in the array
var serialofarray = 0;
for(l=0;l<allimgurlarray.length;l++){
if(currimgsrc == allimgurlarray[l][2]){
serialofarray = allimgurlarray[l][0];
}
}
// with RIGHT arrow, we are supposed to increase the sequence and then use its ATTR SRC to LIGHT BOX
if(serialofarray>=allimgurlarray.length-1){
serialofarray = 0;
}
else {
serialofarray = serialofarray + 1;
}
console.log("Right Arrow : "+serialofarray);
document.getElementById("lightbox-cont-img").setAttribute("src", allimgurlarray[serialofarray][2]);
}
}
These conditional cases related to Key Pressing events are tackled in document.onkeydown = function(event).
This piece of code below is very important for disabling the default behaviours of Key pressing events on IMG tags as well as stacking up all the images on a webpage in an Array to allow Navigation in Lightbox with Left and Right arrow key.
// Select all A tags with IMG child nodes
var atagswithimgtag = document.querySelectorAll("a[href]");
// then prevent the default behaviour of A tags by preventing of opening new page by HREF
// as well as collect all the HREF of A tags with images to enable RIGHT and LEFT arrow key
var allimgurlarray = [];
for(i=0;i<atagswithimgtag.length;i++){
var childAIMGtag = atagswithimgtag[i].childNodes;
if (childAIMGtag[0].nodeType != Node.TEXT_NODE) // or if (el[i].nodeType != 3)
{
// this seems too be a A tag with IMG tag as Childnode
// first we need to prevent the default behaviour of opening the IMG in New Tab
atagswithimgtag[i].addEventListener("click", function(event){
event.preventDefault();
});
// second is when we need to fill image URL aray with A HREF
var listofnodes = atagswithimgtag[i];
allimgurlarray[i] = [];
allimgurlarray[i][0] = i;
allimgurlarray[i][1] = " Image URL is ";//listofnodes.getAttributeNode("title").value;
allimgurlarray[i][2] = listofnodes.getAttributeNode("href").value;
}
console.log(childAIMGtag[0].innerHTML);
}