JSFiddle - React, Tailwind, and code Playground

by Cone

HTML

<div class="gym_galery"></div>
<a href="#" rel="http://papermashup.com/wp-content/uploads/2009/07/gallery.png" class="init">
    <img src="http://papermashup.com/wp-content/uploads/2009/07/gallery.png" class="thumb">
</a>

<div class="img_holder"></div>
<div class="preload"></div>

CSS

* {
     padding:0;
     margin:0;
     outline:none;
 }
 body {
     font-family:'Cuprum', sans-serif;
     font-size:62.5%;
     min-width:1000px;
     background:url('http://s20.postimg.org/rwmk0s51l/image.png');
 }
 a {
     text-decoration:none;
 }
 .thumb {
     height:200px;
     height:150px;
     float:left;
     border:3px solid yellow;
     background:#fff;
 }
 .img_holder {
     position:fixed;
     left:50%;
     display:none;
     top:35%;
     background:#f4f4f4;
     border:2px solid #eee;
 }
 .img_holder img {
 }
 .preload {
     position:absolute;
     opacity: 0;
     top:-100%;
 }

JavaScript

var imgAligner = $('.img_holder');
var imgPreload = $('.preload');

$('a.init').on('click', function () {
    var rImg = $(this).attr('rel');
    imgPreload.html('<img src="' + rImg + '"/>');
    var fImg = $('img', imgPreload);
    HeightWidth(fImg, rImg);

    function HeightWidth(element, element2) {
        var natH = $(element).height();
        var natW = $(element).width();
        var HaW = natW / 2;
        imgAligner.css({
            marginLeft: -HaW
        });
        imgAligner.html('<img src="' + element2 + '"/>').delay(300).slideDown();
    }

});