5

我对灯箱有疑问，请参阅我的 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>
4

1 回答 1

0

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

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

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

用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);
}
于 2021-04-20T21:41:32.747 回答