An easy way to expand images on a page

expandable-image.css

.expandable-image-container {
    position: fixed;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
    background: rgba(25, 25, 25, 0.7);
}

.expandable-image-container img {
    position: fixed;
    height: auto;
    max-height: 90%;
    max-width: 90%;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    margin: auto;
    z-index: 99;
}

expandable-image.js

function ExpandableImage(selector) {
    var _this = this;
    _this.container = document.createElement('div');
    _this.container.className = 'expandable-image-container';
    _this.expandedImage = document.createElement('img');
    _this.container.appendChild(_this.expandedImage);
    _this.isExpanded = false;
    
    function showContainer() {
        _this.container.style.display = 'block';
    }
    
    function hideContainer() {
        _this.container.style.display = 'none';
    }
    
    _this.expandImage = function(image) {
        if (!image.src) {
            throw 'image does not contain a src property';
        }
        
        _this.expandedImage.src = image.src;
        showContainer();
        _this.isExpanded = true;
    };
    
    _this.collapseImage = function() {
        hideContainer();
        _this.isExpanded = false;
    };
    
    function expandImageEventListener(ev) {
        _this.expandImage(ev.target);
    }
    
    _this.container.addEventListener('click', _this.collapseImage);
    _this.expandedImage.addEventListener('click', _this.collapseImage);
    
    var nodes = document.querySelectorAll(selector);
    for (var nodeIndex = 0; nodeIndex < nodes.length; nodeIndex++) {
        nodes[nodeIndex].addEventListener('click', expandImageEventListener);
    }
    
    hideContainer();
    document.body.appendChild(_this.container);
}