<style> .photos {

display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;

}

.photos img {

width: 300px;
height: auto;
padding: 15px;
border: solid 1px rgb(181 181 181);
margin: 8px;
background-color: #e0e0e0;
cursor: zoom-in;

} </style>

<div class=“photos” id=“infinite-list”> </div>

<script> {% assign image_files = site.static_files | where: “image”, true %} const imageList = [

{% for img in image_files %}
'{{ site.baseurl }}{{ img.path }}',
{% endfor %}

];

const listElm = document.querySelector('#infinite-list');

const page = 5; const bottomOffset = 200; let j = 0; const loadMore = function() {

for (let i = 0; i < page && j < imageList.length; i++) {
  const item = document.createElement('img');
  item.src = imageList[j++];
  item.setAttribute('data-enlargeable', true);
  item.style
  listElm.appendChild(item);
  item.classList.add('img-enlargeable');
  const modalCloseListener = (e) => (e.key==='Escape') ? removeModal() : null;
  item.addEventListener('click', function(){
    const src = this.getAttribute('src');
    let modal;
    function removeModal(){
      modal.remove();
      document.body.removeEventListener('keyup', modalCloseListener);
    }
    modal = document.createElement('div');
    modal.style.background = 'RGBA(0,0,0,.5) url('+src+') no-repeat center';
    modal.style.backgroundSize = 'contain';
    modal.style.width = '100%';
    modal.style.height = '100%';
    modal.style.position = 'fixed';
    modal.style.zIndex = '10000';
    modal.style.top = '0';
    modal.style.left = '0';
    modal.style.cursor = 'zoom-out';
    modal.onclick = removeModal;
    document.body.appendChild(modal);
    //handling ESC
    document.body.addEventListener('keyup.modal-close', modalCloseListener);
  });
}

}

// Detect when scrolled to bottom. document.addEventListener('scroll', function() {

if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight - bottomOffset) {
  loadMore();
}

});

// Initially load some items. loadMore();

// In case the screen doesn't have scroll bars, add more images until it does. if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight - bottomOffset) {

loadMore();

}

</script>