<div style='text-align: center;'>
  <label for='InputFiles'>
    ディレクトリを選択してください。
    <input id="InputFiles" type="file" webkitdirectory style='display:none;'>
  </label>
</div>
<ul id="gallery" class="galleryCover">
</ul>

// 以下のライブラリを使用。
<script src="https://iwasakishuto.github.io/js/jquery.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
<script>
  var DirInputTag = document.getElementById('InputFiles');
  var GalleryTag = document.getElementById('gallery');
  var sizeRange = document.getElementById('sizeRange');
  var currentSize = document.getElementById('currentSize');
  var files, file;

  sizeRange.addEventListener('change', function (e) {
    let size = sizeRange.value + "%";
    currentSize.innerHTML = size;
    let target = document.getElementsByClassName("__canvas");
    for (var i = 0; i < target.length; i++) {
      target[i].style.width = size;
    }
  });

  DirInputTag.addEventListener('change', function(e){
    files = e.target.files;
    var img, div;
    var files = [].slice.call(files)
    // Sort files by file name.
    files.sort(function(a,b){
      if(a.name < b.name) return -1;
      if(a.name > b.name) return 1;
      return 0;
    });
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
    for (var i=0; i<files.length; i++) {
      if (validImageTypes.includes(files[i]['type'])){
        let reader = new FileReader();
        reader.fileName = files[i].name
        reader.onload = function(e) {
          //  <img src="{e.target.result}" class="__canvas">
          img = document.createElement('img');
          img.setAttribute('src', e.target.result);
          img.className = '__canvas';
          // <a href="{e.target.result}" data-title="{e.target.name}" data-lightbox="photowall">
          a = document.createElement('a');
          a.setAttribute('href', e.target.result);
          a.setAttribute('data-title', e.target.fileName);
          a.setAttribute('data-lightbox', "photowall")
          a.appendChild(img);
          // <li>
          li = document.createElement('li');
          li.appendChild(a);
          li.className = 'galleryElements';
          GalleryTag.appendChild(li)
        }
        reader.readAsDataURL(files[i]);
      }
    }
  });
</script>