var imgs = document.getElementsByTagName('img');
//read all images and add an on click event
for (var i = 0; i < imgs.length; i++) {
    imgs[i].addEventListener('click', function(event) {
        event.preventDefault();
        var imgUrl = this.getAttribute('data-large_image');
        var modal = createModal(imgUrl);
        document.body.appendChild(modal);
    });
}

//when an image is clicked, create a new modal and display it
function createModal(imgUrl) {
    var modal = document.createElement('div');
    modal.className = 'modal';
    modal.innerHTML = '<div class="modal-content"><div class="modal_close_button_container"><a href="#" class="modal-close">X</a></div><img src="' + imgUrl + '"></div><div class="modal-background"></div>';
    modal.querySelector('.modal-background').addEventListener('click', function() {
        modal.parentNode.removeChild(modal);
    });
    modal.querySelector('.modal-close').addEventListener('click', function(event) {
		event.preventDefault();
        modal.parentNode.removeChild(modal);
    });
    return modal;
}