A CodePen by KurtWM. JQuery PanZoom plugin with JF floor plan

index.html

<div id="msg"><span id="wheeldelta"></span><span id="panzoompan"></span></div>
<section id="panzoom-parent">
  <div class="panzoom">
    <img class="element" src="http://www.johnsonferry.org/portals/0/assets/common/images/JohnsonFerry_floorPlan_drawing_0.svg" />
  </div>
</section>
<section class="buttons">
  <button class="zoom-in">Zoom In</button>
  <button class="zoom-out">Zoom Out</button>
  <input type="range" class="zoom-range" min="1" max="5" step="0.05"/>
  <button class="reset">Reset</button>
</section>

script.js

(function () {
    'use strict';
    var $section = $('#panzoom-parent'),
        $panzoom = $section.find('.panzoom').panzoom({
            $zoomIn: $(".zoom-in"),
            $zoomOut: $(".zoom-out"),
            $zoomRange: $(".zoom-range"),
            $reset: $(".reset"),
            contain: "invert",
            minScale: 1
        });
    $panzoom.parent().on('mousewheel.focal', function (e) {
        e.preventDefault();
        //$('#wheeldelta').text(e.originalEvent.wheelDelta);
        $panzoom.panzoom('zoom', e.originalEvent.wheelDelta < 0, {
            increment: 0.2,
            middle: e
        });
    });
    //$panzoom.on("panzoompan", function(e, panzoom, x, y) {
    //    e.preventDefault();
    //    $('#panzoompan').text('x = ' + x + '; y = ' + y);
    //});
}());

style.css

body { margin: 0; }

.element {
  width: 100%;
}

.panzoom {
  position: absolute;
  text-align: center;
  background: green;
}

/* Seeing red is bad */
#panzoom-parent {
  position: relative;
  background: red;
  width: 760px;
  height: 492px;
  margin-right: auto;
  margin-left: auto;
}

.buttons {
  width: 800px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}