JSFiddle - React, Tailwind, and code Playground

by aaairc

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<div id="flyerdetail">
    
    <div id="flyerdetail_image">
        <img src="/test/images/97-atlg.jpg" />
    </div>
    
    <div id="flyerdetail_header">
        <div id="text">Kings of Lean </div>
    </div>
    
</div>

<div id="info" style = "padding-bottom:30px; margin-bottom: 100px; background-color: pink;">
    I'm going to print out position info here for $box.
</div> 

<div id="22" class="flyer" style="background-color: red;"> CLICK ME 
    <img src="http://www.okizoo.com/wp-content/uploads/bangkok-art-exhibit.jpg" width="96"/>
</div>

CSS

div#flyerdetail {
    display: none; 
    z-index:2; 
    position:fixed; 
    top:0px; 
    left:0px; 
    background: rgba(75, 75, 75, 0.95);
    width: 300px;
    margin-bottom: 40px;
}

div#flyerdetail img{
    width: 300px;
    //    height: 500px;
}

.flyer {
    margin-bottom: 200px;
    margin-right: 200px;
    cursor: pointer;
}

body {
    background-color: grey;   
}

JavaScript

$box = $("#flyerdetail");
$box.draggable();

$(document).click(function() {
    $box.fadeOut('fast');

});

$("#flyerdetail,.flyer").click(function() {
    return false;
});

$('document').ready(function() {
    var afterLoad = function() {
        return 0;
    };

    function resetAfterLoad() {
        afterLoad = function() {
            return 0;
        };
    }

    $box.imagesLoaded(function() {
        afterLoad(resetAfterLoad);
    });


    $("#22").click(function() {
        if (!$box.is(":visible")) {
            afterLoad = adjustPosition;
        }
        adjustHTML("http://www.okizoo.com/wp-content/uploads/bangkok-art-exhibit.jpg", "Art Exhibition Relaunch");
        $box.fadeIn('fast');
    });

});

$(window).resize(function(){
    adjustPosition();
});

function adjustPosition(callback) {
    var winH = $(window).height(),
        winW = $(window).width(), 
        boxHeight = $("#flyerdetail").height();
    
    $("#info").html("box height is: " + boxHeight);
               
    $box.css({
        top: winH/2-boxHeight/2,
        left: winW/2-$box.width()/2
    });
    
    if (typeof callback == "function") {
        callback();
    }
}

function adjustHTML(img_url, text) {
    $("#text").html(text);
    var img = new Image();
    $(img).load(function(){
        $("#flyerdetail_image").empty().append(img);
        adjustPosition();
    }).attr('src',img_url);
}