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

Question

我对灯箱有疑问，请参阅my jsFiddle。 单击其中一个图像会打开更大版本的绘画作为页面叠加层。

如何使用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>

Answer 1

Pure Javascript Lightbox 或 Image Popup Modal 的完整实现可在我的答案https://stackoverflow.com/a/67169851/8210884 中找到。

上面链接中提到的这个答案允许处理使用 ESC 键隐藏灯箱的问题以及使用 Left 和 Right 在 Lightbox 中导航图像的问题 方向键。

这是来自该答案的代码片段，它们将帮助我们解决这两个问题。

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

这些与按键事件相关的条件案例在document.onkeydown = function(event)中得到解决。

---

下面的这段代码对于禁用IMG标签上的按键事件的默认行为以及将网页上的所有图像堆叠非常重要允许使用左右箭头键在灯箱中导航的数组。

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