Javascript / CSS灯箱仅适用于第一个元素？

时间：2019-03-08 22:50:04

标签： javascript css lightbox

我试图在单击每张照片后在Javascript / CSS灯箱中打开每张照片。

目前，我的照片列表中只有第一张照片在灯箱中打开。其他照片不会在灯箱中打开。

请有人可以解释/告诉我为什么这样做，并解释/告诉我这样做的正确方法吗？

这是我的HTML / PHP：

<?php $result4 = $mysqli->query("SELECT * FROM user_data WHERE user_id = $p_id");
    if($result4->num_rows > 0) {
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';
    echo '<div class="profile_gallery_image"><img id="myImg" src='.$image.' height="100%" width="100%" /></div>';

    } ?>  

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <img class="modal-content" id="img01">
</div>

CSS：

<style>

#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
    transform: scale(1.09);
    border: 1px solid #a5a5a5;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 500px;
  border: 1px solid #f1f1f1;
  border-radius: 0px;

}

/* Caption of Modal Image */

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}
</style>

Javascript：

   <script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
img.onclick = function(){
  modal.style.display = "block";
  modalImg.src = this.src;

}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
span2.onclick = function() { 
  modal.style.display = "none";
}
</script>

谢谢。

3 个答案:

答案 0 :(得分：0)

好消息是，您的图像上既不需要id也不需要class。

  • 听一下图像周围的容器，而不是不。此技术称为事件委托，它对性能更好。我们没有为您可能拥有的每张图像绑定n事件监听器，而是在图像容器中仅添加了一个监听器
  • 单击时，获取src元素的alt和target并将其传递给showModal函数。用传递的值填充模式图像的src和alt

以后的建议

您似乎/正在计划在模态中显示标题，该标题基于传入的alt值。考虑在模式中使用figcaption。

  

HTML或Figure Caption元素代表标题   或说明其父项其余内容的图例   元素。

这是一个让您入门的示例。我将模态/模态内容的样式留给您。我在模式中使用了figure元素来获取语义值。

演示

var modal = document.getElementById('myModal');

var imgContainer = document.querySelector('.imageContainer');
var modalContentImage = modal.querySelector('.modal-content-image');

imgContainer.addEventListener('click', function(e) {
  if (e.target.nodeName === "IMG") {
    showModal({src: e.target.src, alt: e.target.alt})
  }
});

function showModal(opts) {
  modal.style.display = "block";
  modalContentImage.setAttribute('src', opts.src);
  modalContentImage.setAttribute('alt', opts.alt);
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}
span2.onclick = function() {
  modal.style.display = "none";
}
#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
  transform: scale(1.09);
  border: 1px solid #a5a5a5;
}

/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 10;
  /* Sit on top */
  padding-top: 100px;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}

/* Modal Content (image) */

.modal-content-image {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 500px;
  border: 1px solid #f1f1f1;
  border-radius: 0px;
}

/* Caption of Modal Image */

/* Add Animation */

.modal-content,
#caption {
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0)
  }
  to {
    -webkit-transform: scale(1)
  }
}

@keyframes zoom {
  from {
    transform: scale(0)
  }
  to {
    transform: scale(1)
  }
}

/* The Close Button */

.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px) {
  .modal-content {
    width: 100%;
  }
}

/* Presentation only */

.imageContainer {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow-x: auto;
}

.imageContainer img {
  width: 100px;
  flex-shrink: 0;
}

html,
body {
  margin: 0;
  padding: 0;
}
<div id="myModal" class="modal">
  <span class="close">&times;</span>
  <figure class="modal-content">
    <img class="modal-content-image" alt>
  </figure>
</div>

<div class="imageContainer">
  <img src="https://picsum.photos/300/300/?image=0" alt="CPU 1">
  <img src="https://picsum.photos/300/300/?image=1" alt="CPU 2">
  <img src="https://picsum.photos/300/300/?image=2" alt="CPU 3">
  <img src="https://picsum.photos/300/300/?image=3" alt="CPU 4">
  <img src="https://picsum.photos/300/300/?image=4" alt="CPU 5">
  <img src="https://picsum.photos/300/300/?image=5" alt="CPU 6">
  <img src="https://picsum.photos/300/300/?image=6" alt="CPU 7">
  <img src="https://picsum.photos/300/300/?image=7" alt="CPU 8">
  <img src="https://picsum.photos/300/300/?image=8" alt="CPU 9">
  <img src="https://picsum.photos/300/300/?image=9" alt="CPU 10">
  <img src="https://picsum.photos/300/300/?image=10" alt="CPU 11">
  <img src="https://picsum.photos/300/300/?image=11" alt="CPU 12">  
</div>

jsFiddle

答案 1 :(得分：0)

您的代码包含多个ID，请尝试使用类并通过DjangoQ(tower_code='something')获取图像类，然后在循环内的每个图像上绑定click事件，尝试将php代码添加到下面的此修订的代码中

document.getElementsByClassName
// Get the modal
var modal = document.getElementById('myModal');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgs = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");

for(var i = 0; i < imgs.length; i++)
{
  imgs[i].onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;

  }
}

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("modal")[0];

// When the user clicks on <span> (x), close the modal
span.onclick = function() { 
  modal.style.display = "none";
}
span2.onclick = function() { 
  modal.style.display = "none";
}
#myImg {
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {
    transform: scale(1.09);
    border: 1px solid #a5a5a5;

}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 10; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 500px;
  border: 1px solid #f1f1f1;
  border-radius: 0px;

}

/* Caption of Modal Image */

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

答案 2 :(得分：0)

纯 Javascript 灯箱/图片弹出模式

我希望分享一个完全符合 ARIA 导航指南且轻量级且易于实施的纯 Javascript 灯箱或图像弹出模式，因为：

  1. 它不需要任何 JQUERY，因此对 CDN 的额外导入请求可以防止整个 JQUERY 库的缓冲。
  2. 这是一种部署即忘的设计，我们只需要添加与 LIGHTBOX 相关的 HTML、CSS 和 JAVASCRIPT，无需在图像的 HTML 标签或其父 A 标签中添加唯一的 ID 或 CLASS。这就是为什么以后从您现有的网页中添加或删除图像不需要对 Javascript 或 IMG/A 标签的 ID/CLASS 属性进行任何更改。

  1. 为了实现这一点，一个前提是 IMG 标签中的所有图像都应该是父 A 标签（如 <a title="" href=""><img alt="" src=""/></a>）的唯一子节点。

    • 另外，要记住的一件事是，在 A 标签和 IMG 标签的打开和关闭之间不应有空白，它应显示为 <a><img/></a> .

    • 因为在下载页面时只加载 IMG 标签图像而 A 标签不是，这就是为什么为所有 IMG 标签创建父 A 标签允许在 IMG 标签中存储较小尺寸的图像和较大尺寸的父 A 标记中的相同图像。

    • 将 IMG 标记与 Loading="lazy" 结合将有助于进一步加快页面加载速度。

  2. 这个灯箱在网页上实施时很简单，即您点击、触摸或按Enter键页面上的 IMG 标签图像和 Modal 或 Lightbox 将弹出以显示相同的 URL 图像或存储在 IMG 标签的父 A 标签中的不同图像。

    • 用于存储不同质量图像的相同或不同 URL 取决于您的选择。前者更容易实现，而后者性能更好。

现在让我们看看一些代码：

这是包含图像和指向其他页面的 URL 的 A 标记的示例 HTML。

<a href="https://1.bp.blogspot.com/-jNZtfo_qgNM/YHH_XF6FooI/AAAAAAAAC5E/y_tNUslqFPITSVncCkF3zyEC-RROSvETgCLcBGAsYHQ/s328/1.jpg" title="first image"><img alt="first image" src="https://1.bp.blogspot.com/-jNZtfo_qgNM/YHH_XF6FooI/AAAAAAAAC5E/y_tNUslqFPITSVncCkF3zyEC-RROSvETgCLcBGAsYHQ/s320/1.jpg"/></a>

<a href="https://1.bp.blogspot.com/-F0sshQGKu8Y/YHH_XL41aDI/AAAAAAAAC5M/fyAeo4X2tFw-RN-g8YFxNcel0WivQjj5gCLcBGAsYHQ/s400/2.jpg" title="second image"><img alt="second image" src="https://1.bp.blogspot.com/-F0sshQGKu8Y/YHH_XL41aDI/AAAAAAAAC5M/fyAeo4X2tFw-RN-g8YFxNcel0WivQjj5gCLcBGAsYHQ/s320/2.jpg"/></a>

<a href="https://1.bp.blogspot.com/-xk_pNZ1fh7o/YHH_XEROwmI/AAAAAAAAC5I/-WOsyfKgtSMRzXQBeEX-yjRX8TBJuEkFwCLcBGAsYHQ/s400/3.jpg" title="third image"><img alt="third image" src="https://1.bp.blogspot.com/-xk_pNZ1fh7o/YHH_XEROwmI/AAAAAAAAC5I/-WOsyfKgtSMRzXQBeEX-yjRX8TBJuEkFwCLcBGAsYHQ/s320/3.jpg"/></a>

<a href="https://1.bp.blogspot.com/-e3gjnYR7exE/YHH_YHRQgLI/AAAAAAAAC5Q/kgQYFsvBjuYPAXTjzMFkzvsRT6JgQlkywCLcBGAsYHQ/s720/4.jpg" title="fourth image"><img alt="fourth image" src="https://1.bp.blogspot.com/-e3gjnYR7exE/YHH_YHRQgLI/AAAAAAAAC5Q/kgQYFsvBjuYPAXTjzMFkzvsRT6JgQlkywCLcBGAsYHQ/s320/4.jpg"/></a>

<a href="https://1.bp.blogspot.com/-zGPorKCAHqw/YHH_YHcIpSI/AAAAAAAAC5U/Jx2serYqk58fa_HSf1GPwDZu2nT1c8kJgCLcBGAsYHQ/s1280/5.jpg" title="fifth image"><img alt="fifth image" src="https://1.bp.blogspot.com/-zGPorKCAHqw/YHH_YHcIpSI/AAAAAAAAC5U/Jx2serYqk58fa_HSf1GPwDZu2nT1c8kJgCLcBGAsYHQ/s320/5.jpg"/></a>

<a href="https://anubhavyadavjovian.blogspot.com/">Anubhav yadav</a>

假设我们的网页上有五张图片，并且所有图片都采用上述定义的 <a title="" href=""><img alt="" src=""/></a> 格式。

为了显示此灯箱是动态的，我们添加了一个额外的 <a href="https://anubhavyadavjovian.blogspot.com/">Anubhav yadav</a>，当在其上按下点击、触摸或 Enter 键时，它的行为就像一个普通的 A Href 标签，而只有 IMG 标签作为子标签的 A 标签会弹出灯箱。

<div id='lightbox-home'>
  <div id='lightbox-container' onclick='hideoverlay()'>
    <img alt='' id='lightbox-cont-img' onclick='hideoverlay()' src=''/>
  </div>
</div>

上面的真实 HTML 代码适用于我们的灯箱，带有 “lightbox-container” ID 显示为半透明的黑色背景，带有带有 " 的图像显示标签lightbox-cont-img” ID。

#lightbox-container {
  z-index:2000;
  position:fixed;
  bottom:-5000px;
  left:0px;
  width:100%;
  height:100%;
  margin:0px;
  background-color: rgba(38, 38, 38, 0.85);
  transition: all 0.4s ease-out;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
#lightbox-container.showcontainer {
  bottom:0px;
}
#lightbox-container img {
  max-width:95%;
  max-height:95%;
  object-fit:contain;
}
:focus {
  border: 2px solid gold;
}

以上是用于装饰 Lightbox 以及在出现和消失时创建过渡的真实 CSS。

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

// now we have to deal with Keyboard events
document.onkeydown = function(event){
  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");
    }
  }
  else if(event.keyCode==13) { // ENTER key pressed
    if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
      document.getElementById("lightbox-container").classList.remove("showcontainer");
    }
    else { // LIGHTBOX OFF
      var currentEventTarget = document.activeElement;
      if(currentEventTarget.tagName=='A'){
        var entertargetchild = currentEventTarget.childNodes;
        if(entertargetchild[0].tagName=='IMG'){
          var hrefofparent = currentEventTarget.getAttribute("href");
          document.getElementById("lightbox-cont-img").setAttribute("src", hrefofparent);

          document.getElementById("lightbox-container").classList.add("showcontainer");
          document.getElementById("lightbox-cont-img").focus();
        }
      }

    }
  }
  else if(event.keyCode==9) { // TAB key pressed
    if(document.getElementById("lightbox-container").classList.contains("showcontainer")){ // LIGHTBOX ON
      document.getElementById("lightbox-container").classList.remove("showcontainer");
    }
  }
  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
    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]);
    }
  }
  else { // If any key other than ESC is pressed

    if(document.getElementById("lightbox-container").classList.contains("showcontainer")){
      document.getElementById("lightbox-container").classList.remove("showcontainer");
    }
  }
}

// through this we are handling the CLICK ON IMAGE events
document.onclick= function(event) {
  overlaypop(event);
};
function overlaypop(event) {
  if (event===undefined) event= window.event;
  var targettag = event.target;
  var targetparent = event.target.parentNode;
  if(targettag.tagName=='IMG'){
    if(targetparent.nodeName=='A'){
      event.preventDefault();
      var hrefofparent = targetparent.getAttribute("href");
      //alert('clicked on '+ targettag.tagName + ' parent name is ' + targetparent.nodeName + ' and URL is ' + hrefofparent);
      document.getElementById("lightbox-cont-img").setAttribute("src", hrefofparent);
      document.getElementById("lightbox-container").classList.add("showcontainer");
      document.getElementById("lightbox-cont-img").focus();
    }
  }
}
function hideoverlay() {
  document.getElementById('lightbox-container').classList.remove('showcontainer')
}

使用上面的 Javascript，我们希望达到以下目的。

  1. 全屏弹出图像，带有半透明黑色背景 任何图像被触摸、点击或按下后输入 使用 TAB 键导航到所需的图像。
  2. 在触摸、点击屏幕上的任意位置或 键盘上的任何键（左右箭头键除外）都被按下。
  3. 浏览网页上可用的所有图片格式 左右的 箭头键。

简而言之，让我们通过理解这个 Javascript 的各个部分来看看这个脚本如何达到我们的目的。

  1. 使用 document.querySelectorAll("a[href]")，我们希望获得所有 在名为 atagswithimgtag 的数组中带有父 A 标记的 IMG 标记。

    • 我们将使用这个数组，首先通过使用 event.preventDefault() 来禁用在新页面中打开 A 标记的默认行为。
    • 然后我们将使用这个数组创建一个名为 allimgurlarray 的新二维数组来存储 A 标签的 HREF URL 及其索引号。这样可以在使用左右键时进行更好的跟踪。

  2. 之后，我们必须处理两种类型的事件，即按键事件和触摸/点击事件。。 >

    • 按键事件由 document.onkeydown 处理。在这里，我们必须在 If-Else-If 条件的帮助下处理 Enter、Tab、Esc、向右和向左箭头键。
    • 触摸或点击事件由 document.onclick 处理。

  3. 我们使用 .classList.contains 来检查灯箱是隐藏还是可见。我们分别使用 .classList.add 和 .classList.remove 来显示和隐藏灯箱。

  4. 我们使用 document.activeElement 、.tagName 和 .childNodes 来标识 IMG 标签及其父标签 A 标签，在使用后按下 Enter 键用于导航的 TAB 键。

  5. 我们使用 window.event、event.target、event.target.parentNode 和 .nodeName 来识别 IMG 标签及其父 A 标签，当相应的图像被点击或触摸时.

  6. 为了使灯箱与 ARIA 更加兼容，我们使用 .focus() 将焦点放在灯箱中当前显示的图像上。

点击、触摸或按任意键会在灯箱可见时隐藏它。

检查 this Answer 以详细了解此 Javascript 如何处理诸如 ESC、LEFT 和 RIGHT 等键的一般按键事件强>箭头。

相关问题
最新问题