弹出图库无法正确显示图片

Question

我想通过js创建弹出式画廊，而不使用“ onclick事件”。我的问题是，当我单击特定图像时，始终会显示相同的图片。

{
  "name": "prfront",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "dependencies": {
    "express": "^4.16.4"
  },
  "proxy": {
    "/api": {
      "target": "https://prback.herokuapp.com/",
      "ws": true,
      "changeOrigin": true
    }
  },
  "devDependencies": {},
  "scripts": {
    "start": "node server.js"
  },
  "author": "",
  "license": "ISC"
}

document.addEventListener("DOMContentLoaded", function() {
  var pic = document.getElementsByClassName("gallery");
  var box = document.getElementsByClassName("lightbox")[0];
  var close = document.getElementsByClassName("close")[0];

  for (var i = 0; i < pic.length; i++) {
    pic[i].addEventListener("click", lightbox);
  }

  function lightbox() {
    box.style.display = "block";
    close.addEventListener("click", closeBox);
  }

  function closeBox() {
    box.style.display = "none";
  }
})

我知道它与

的索引有关

<div class="content center">
  <div class="gallery">
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
  <div class="gallery">
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
  <div class="gallery">
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
</div>
<div class="lightbox">
  <div class="lightbox_content">
    <div class="close"><b>&times;</b></div>
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
</div>
<div class="lightbox">
  <div class="lightbox_content">
    <div class="close"><b>&times;</b></div>
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
</div>
<div class="lightbox">
  <div class="lightbox_content">
    <div class="close"><b>&times;</b></div>
    <img src="https://lorempixel.com/320/170/" alt="" />
  </div>
</div>

但是我不知道如何将点击的图像与显示的图像连接起来。