image gallery

by jj_gutierrez

HTML

<div class="gallery">
    <div id='popupwrapper'> 
        <div id="popupcontent">
            <span id='closer'>&#10006;</span>
            <canvas id='popup'></canvas>
        </div>
    </div>
</div>

CSS

.gallery {
    display:inline-block;
    overflow:auto;
    width:inherit;
    height:inherit;
}
.sample > img {
    position:relative;
    display:block;
}
.sample {
    margin:0px;
    display:inline-block;
    width:10em;
    height:10em;
    cursor: pointer;
    padding:.1em;
    overflow:hidden;
}
#popupcontent {
    top:50%;
    left:50%;
    position:absolute;
    width:auto;
    height:auto;
    max-height:100%;
    max-width:100%;
    overflow:hidden;
    transform:translate(-50%, -50%);
    -webkit-transform:translate(-50%, -50%);
    z-index;
    100;
}
#popup { 
    max-height:100%;
    max-width:100%;
    padding-bottom: 32px;
    box-sizing: border-box;
}
#closer:hover {
    opacity:1;
}
#closer {
    cursor: pointer;
    opacity:.5;
    background-color:#aaa;
    position:relative;
    top:0px;
    left:0px;
    font-size:2em;
    width:1em;
    height:1em;
    max-height:100%;
    max-width:100%;
    display:none;
    z-index:1000;
}
#popupwrapper {
    background-color:RGBA(0, 0, 0, .4);
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%;
    
    display:none;
    overflow:hidden;
    z-index:10;
}

JavaScript

/*image gallery
basic design is to copy facebook
so |_|_|_|_|_|
   |_|_|_|_|_|
   |_|_|_|_|_|
   |_|_|_|_|_|
uniform size  zoomed to fit
these will be canvases 
*/
var galleries = getByClass('gallery'),
    imageFocus, images;
galleries.forEach(function (e) {
    for (var i = 0; i < 25; i++) {
        var sample = document.createElement('div');
        sample.setAttribute('class', 'sample');

        var imgel = new Image();
        sample.appendChild(imgel);
        imgel.addEventListener('load', imageloaded);
        imgel.src = "http://lorempixel.com/" + ((Math.random() * 1000) | 0) + "/" + ((Math.random() * 1000) | 0) + "/?" + i;
        e.appendChild(sample);
    }

    images = getByTag('img');
    images.forEach(function (image) {


        image.addEventListener('click', thumbnailClick, false);
    });

});
getById('closer').addEventListener('click', function (e) {
    getById('popup').style.display = 'none';
    getById('closer').style.display = 'none';
    getById('popupwrapper').style.display = 'none';
});
document.addEventListener("keydown", keyHandler, true);

function keyHandler(e) {
    console.log(e.keyCode);
    if(e.keyCode ===37)
        //left
        ;
    if(e.keyCode ===38)
        //up
        ;
    if(e.keyCode ===39)
        //r
        ;
    if(e.keyCode ===40)
        //down
        ;
}

function thumbnailClick(e) {
    if (getById('selected')) getById('selected').id = '';
    if (e.target.id === 'selected') {
        //e.target.setAttribute('id','');
        return false;
    }
    getById('popup').width = e.target.naturalWidth;
    getById('popup').height = e.target.naturalHeight;
    getById('popup').getContext('2d').drawImage(e.target, 0, 0);
    //e.target['id'] = 'selected';
    getById('popupwrapper').style.display = 'block';
    getById('closer').style.display = 'block';
    getById('popup').style.display = 'block';

}

function getByTag(s) {
    return [].map.call(document.getElementsByTagName(s.toString()), function (e) {
   ...