Zooming images inline

by AnnaGerber

HTML

<button id="zoomIn">zoom in</button>
<button id="zoomOut">zoom out</button>
<div class="panzoom-parent" style="margin:2em;overflow: hidden; position: relative;">
    <img id='foo' class="panzoom" src="http://austese.net/sites/all/modules/austese_repository/api/resources/0502d75b3f4744f1b5ac389867ed09cf" width="90%" style="-webkit-transform: matrix(1, 0, 0, 1, 0, 4); cursor: move; transition: none; -webkit-transition: none;">
</div>

JavaScript

var v = 1.0;

$('#zoomIn').on('click', function () {
    v += 0.25;
    var mvalue = 'matrix(' + v.toFixed(1) + ',0,0,' + v.toFixed(1) + ',0,4)';

    $('#foo').css('-webkit-transform', mvalue);
});
$('#zoomOut').on('click', function () {
    if (v > 0.25) {
        v -= 0.25;
        var mvalue = 'matrix(' + v.toFixed(1) + ',0,0,' + v.toFixed(1) + ',0,4)';
        $('#foo').css('-webkit-transform', mvalue);
    }
});