Display image(Only anchor linked to png, jpg, gif) overlapped to webpage.

imageviewer.js

(function() {
  var bd = document.getElementsByTagName("body")[0];
  var cw = document.documentElement.clientWidth;
  var an = document.getElementsByTagName("a");
  var cf = document.getElementById("iv");
  if(cf){bd.removeChild(cf);return null;}
  var li = [];
  for (var i = 0; i < an.length; i++) {
    var ref = an[i].getAttribute("href");
    var re = new RegExp("(.*)[.](jpg|gif|png)");
    if ((re.test(ref))) {
      li.push(ref);
    }
  }
  var liex = li.filter(function(x, k, self) {
    return (self.indexOf(x) === k);
  });
  var main = document.createElement("div");
  main.setAttribute("id", "iv");
  var st = main.style;
  st.position = "absolute";
  st.left = "0";
  st.top = "0";
  st.width = "100%";
  st.backgroundColor = "rgba(45,45,45,0.5)";
  st.zIndex = "99999";
  main.onclick = (function(b, m) {
    return function() {
      b.removeChild(m);
    };
  })(bd, main);
  bd.appendChild(main);
  var m = document.getElementById("iv");
  var pushMain = function(elem) {
    return function(){
      var im = document.createElement("img");
      var iw = elem.width;
      im.setAttribute("src", elem.src);
      if (cw < iw) {
        im.setAttribute("width", cw);
      }
      console.log("IMAGE WAS LOADED: "+elem.src);
      m.appendChild(im);
    };
  };
  var loadImage = function(_src) {
    var ph = new Image();
    ph.src = _src;
    ph.onload = pushMain(ph);
  };
  var LoadAll = function(_list) {
    var urlli = _list;
    var cnt = 0;
    var wkr = function(){
      loadImage(urlli[cnt]);
      console.log("IMAGE IS LOADING: "+urlli[cnt]);
      if (++cnt >= urlli.length) {
        clearInterval(tmr);
        console.log("ALL IMAGE WAS LOADED: "+urlli.length+" images");
      }
    };
    var tmr = setInterval(function(){wkr();}, 500);
    return wkr;
  };
  LoadAll(liex);
})();