Javascriptでライトボックスを作ってみたのでメモ

参考までに

ポイントは、子要素を取得するために、forがすごく活躍しました。
あと、要素の取得のされ方も、かなり調べました。個性のあるかんじです笑
javascript

let dom = {

  body : document.getElementsByTagName("body"),
  overlay : document.getElementById("overlay"),
  sample : document.getElementById("sample"),
  sampleA : document.querySelectorAll(".sample"),

  processing_style : function(){

    h = window.innerHeight;
    w = (document.body.clientWidth/2)-400;
    t = document.body.scrollTop;
    v = dom.overlay.children;
    dom.overlay.style.height = h + "px";
    dom.overlay.style.display = "block";
    dom.overlay.style.left = "0" + "px";
    dom.overlay.style.top = t + "px";
    dom.overlay.style.opacity = '1';

    for(let i = 0; i < v.length; i++){
      t = document.body.scrollTop+200;
      v[i].style.left = w + "px";
      v[i].style.top = t + "px";
      v[i].style.opacity = "1";
    }

  },

  behavior : function(x){

        q = x.children;
        for (let i = 0; i < q.length; i++){
          type = q[i].getAttribute("src");
          k = document.createElement("img");
          k.setAttribute("src", type);
          dom.overlay.appendChild(k, dom.overlay);
        }

    dom.processing_style();

  },
};

  let overlay = function(){
      r = dom.overlay.children;
      for (let i = 0; i < r.length;i++) {
        dom.overlay.removeChild(r[i]);
        dom.overlay.style.display = "none";
      }
  };

  let clickbox = function(){

    g = dom.sample.children;

    for (let i = 0; i < g.length; i++){
        g[i].addEventListener("click",function(){
          dom.behavior(this);
        },false);
      }

      dom.overlay.addEventListener("click",overlay,false);

    };

  clickbox();

css

#main {
  clear: left;
  margin: 20px auto;
  padding: 5px 20px;
  width: 800px;
}
#sampleA {
  margin: 10px auto 400px auto;
  width: 800px;
  padding: 20px;
}
#sampleA ul:after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0.1px;
  font-size: 0.1em;
  line-height: 0;
  clear: both;
}
#sampleA li {
  float: left;
}
#sampleA li img {
  cursor: pointer;
  width: 155px;
}
#overlay {
  position: absolute;
  display: none;
  top: 0;
  width: 100%;
  z-index: 1;
  background: url(images/black.png);
}
#overlay img {
  display: inline-block;
  position: absolute;
  width: 800px;
}

html

  <div id="overlay"></div>
  <div id="main">
    <div id="sampleA">
      <ul id="sample">
        <li><img class="sample" src="images/pic1.jpg" /></li>
        <li><img class="sample" src="images/pic2.jpg" /></li>
        <li><img class="sample" src="images/pic3.jpg" /></li>
        <li><img class="sample" src="images/pic5.jpg" /></li>
        <li><img class="sample" src="images/pic6.jpg" /></li>
        <li><img class="sample" src="images/pic7.jpg" /></li>
        <li><img class="sample" src="images/pic8.jpg" /></li>
        <li><img class="sample" src="images/pic9.jpg" /></li>
      </ul>
    </div>
  </div>

参考までに