JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://eightmedia.github.com/hammer.js/hammer.js"></script>
<!DOCTYPE HTML>
<html>
<head>  
    <!-- 
		NOTE viewport is set so user can scale 
		-->
<meta name="viewport" content="user-scalable=yes"/>
</head>
<body>
<div id="touchme">
    <div id="zoomme">Zoom me</div>
    <div id="logtext">Log:</div>
    <div id="log"></div>
    <div id="footertext">Image:</div>
</div>
<div class="footer">
    <a href="http://example.com/">
        <img id="ad" style="cursor: pointer;" src="http://img0.www.suckmypic.net/img/G/G/ffjFYo1j/jsFiddle1.png" title="Example"></img>
	</a>
</div>
</body>
</html>

CSS

#log{
    background-color : #888;
    -webkit-border-radius : 20px;
    -moz-border-radius : 20px;
    border-radius : 20px;
    color : #fff;
    opacity : 0.8;
    margin : 15px;
    height : 100px;
    overflow : auto;
    padding : 20px;
}
div#logtext {
   margin-top:80px;
   font: 400 20px/20px sans-serif;
   color: #ffce00;
   font-weight:bold;
   text-align: center;
}
div#footertext {
   position:fixed;
   bottom:100px;
   font: 400 20px/20px sans-serif;
   color: #ffce00;
   font-weight:bold;
   text-align: center;
   left:50%;
   margin-left:-29px;
}
div.footer {
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-364px;
    height:90px;
    z-index:501;
}
#touchme {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
}
#zoomme {
    text-align: center;
    font: 400 36px/36px sans-serif;
    color: #ffce00;
    margin-top: 20px;
}

JavaScript

function log(msg) {
    $('#log').text(msg);
}

var pziW = "test";
var viewport_width = $(window).innerWidth();
var zoom = 0;

var hammer = new Hammer(document.getElementById("touchme"));

hammer.ontransformstart = function(ev) {
    console.log("ontransformstart");
    console.log(ev);
    //pziW = $(window).innerWidth() / 2 * ev.scale;
    zoom = ev.scale;
    var msg = "ontransformstart " + pziW + " scale " + zoom;
    log(msg);
};
hammer.ontransform = function(ev) {
    console.log("ontransform");
    console.log(ev);
    zoom -= ev.scale;
    viewport_width+=viewport_width*zoom;
    zoom = ev.scale;
    pziW=viewport_width;
    //pziW = $(window).innerWidth() / 2 * ev.scale;
    jqUpdateSize();
    var msg = "ontransform " + pziW + " scale " + zoom;
    log(msg);
};
hammer.ontransformend = function(ev) {
    console.log("ontransformend");
    console.log(ev);
    var msg = "ontransformend " + pziW + " scale " + zoom;
    log(msg);
};

function jqUpdateSize(ev) {
    var wiW = $(window).innerWidth();
    if (wiW < 760 || pziW < 760) {
        var msg = "Image 468";
        log(msg);
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/H/y/cdsi5AqK/jsFiddle2.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-234px");
    }
    if (wiW < 500 || pziW < 500) {
        var msg = "Image 234";
        log(msg);
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/1/L/mmy4jT8s/jsFiddle3.png");
        $(".footer").css("height", "60px");
        $(".footer").css("margin-left", "-117px");
    }
    if (wiW > 760 || pziW > 760) {
        var msg = "Image 760";
        log(msg);
        $("img#ad").attr("src", "http://img0.www.suckmypic.net/img/G/G/ffjFYo1j/jsFiddle1.png");
        $(".footer").css("height", "90px");
        $(".footer").css("margin-left", "-364px");
    }
};

$(document).ready(function () {
    jqUpdateSize();
});

$(window).resize(function (a) {
    jqUpdateSize();
    var wiW =...