如何使用esc键关闭lightbox页面覆盖

我有一个关于灯箱的问题。 点击其中一幅图像，会打开一个更大版本的画作作为页面覆盖

如何使用ESC键关闭此页面覆盖

如何使用箭头键移动到下一个图像

我需要什么样的jQuery插件/javascript来实现这一点

<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">
                            <a href="#page" class="lb-close">x Close</a>
                            <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>
                                <a href="#Light-that-Shapes-the-Shadows" class="lb-prev">Prev</a>
                                <a href="#Central-Highlands-Circle-of-Gold" class="lb-next">Next</a>                            
                            </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">
                            <a href="#page" class="lb-close">x Close</a>
                            <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>
                                <a href="#Fly-My-Pretties-Walled-Garden" class="lb-prev">Prev</a>
                                <a href="#Guardian-of-the-Night" class="lb-next">Next</a>                           
                            </div>
                        </div>
                    </li>

</ul>

放飞我的美丽：画布上的混合媒体
72 x 137厘米



中央高地：画布上的黄金混合媒体圈
51 x 108厘米

纯Javascript Lightbox或图像弹出模式的完整实现可在我的答案中找到

上面链接中提到的这个答案允许处理使用ESC键隐藏Lightbox的问题，以及使用左和右箭头键在Lightbox中导航图像的问题

// 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);
}

下面是答案中的代码片段，它们将帮助我们实现这两个问题

使用ESC键隐藏灯箱：

  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");
    }
  }

使用左右箭头键在Lightbox中浏览网页上的所有图像：

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]);
    }
  }