A Pen by KurtWM.

index.html

<div id="msg"></div>
<section id="panzoom-parent">
  [[[http://codepen.io/KurtWM/pen/kvJhd]]]
  <div class="panzoom"></div>
</section>

JQuery-PanZoom---Custom-controls.markdown

JQuery PanZoom - Custom controls

This is a test implementation of the JQuery PanZoom plugin. The idea is to have SVG floor plans that can be cleanly scaled and panned.

This version does not have the slider zoom-indicator.

A Pen by KurtWM on CodePen.

License.

script.js

(function () {
    'use strict';
    var imgDir = "http://www.johnsonferry.org/portals/0/assets/common/images/",
        floors = {
            first: {
                img: "JohnsonFerry_floorPlan_drawing_1.svg"
            },
            third: {
                img: "JohnsonFerry_floorPlan_drawing_3.svg"
            },
            second: {
                img: "JohnsonFerry_floorPlan_drawing_2.svg"
            },
            basement: {
                img: "JohnsonFerry_floorPlan_drawing_0.svg"
            },
            parking: {
                img: "ParkingMap.png"
            }
        },
        loadImages = function () {
            var img,
                imgPreload
            // Preload Images
            for (img in floors) {
                if (typeof floors[img] !== 'function') {
                  $('.panzoom').append('<img class="element" src="' + imgDir + floors[img].img + '" />');
                }
            }
        },
        $section = $('#panzoom-parent'),
        $panzoom = $section.find('.panzoom').panzoom({
            $zoomIn: $("#zoomin-ctl"),
            $zoomOut: $("#zoomout-ctl"),
            $reset: $("#reset"),
            contain: "invert", //"invert",
            minScale: 1,
            maxScale: 2
        }),
        doPan = function (x, y, rel, anim) {
            $panzoom.panzoom("pan", x, y, { relative: rel, animate: anim });
        },
        changeFloor = function (floor) {
            $('.element').hide();
            $('.element[src*="' + floor + '"]').show();
        };
    loadImages();
    $section.on('mousewheel.focal', function (e) {
        e.preventDefault();
        $panzoom.panzoom('zoom', e.originalEvent.wheelDelta < 0, {
            increment: 0.1,
            focal: e
        });
    });
    $('#pan-u').click(function () {
        doPan(0, -100, true, true);
    });
    $('#pan-r').click(function () {
        doPan(100, 0, true, true);
    });
    $('#pan-d').click(function () {
        doPan(0, 100, true, true);
    });
    $('#pan-l').click(function () {
        doPan(-100, 0, true, true);
    });
    $('#floor-3').click(function () {
        changeFloor(floors.third.img);
    });
    $('#floor-2').click(function () {
        changeFloor(floors.second.img);
    });
    $('#floor-1').click(function () {
        changeFloor(floors.first.img);
    });
    $('#floor-0').click(function () {
        changeFloor(floors.basement.img);
    });
    $('#parking').click(function () {
        changeFloor(floors.parking.img);
    });
}());

style.css

body { margin: 0; }

.element {
  width: 100%;
}

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

/* We initially want all floor images but one to be hidden. */
.panzoom .element:not(:first-child) {
  display: none;
}

#panzoom-parent {
  position: absolute;
  background: #708690;
  border: 1px solid #445C6F;
  width: 760px;
  height: 570px;
  margin-right: auto;
  margin-left: auto;
}