Seat Map

by mrjordy

HTML

<script src="https://filedb.experts-exchange.com/incoming/2013/06_w26/662697/jq.panzoom.js"></script>
<button class="zoom-out">Zoom Out</button>
<button class="zoom-in">Zoom In</button>
<button class="reset">Reset</button>
<button class="NavToFred">Navigate To Fred</button>
<div id="seatsContainer">
  <div id="seats">
    <div class="seatsLeft"></div>
    <div class="seatsRightContainer">

      <div id="panzoom">
<div class="seatsBackgroundImage"></div>
<div class="seatsCloud"></div>
<div class="cube cubeSmall cubeBlue" id="c3w1"><div class="cubeNum">3w1</div><div class="cubeName"></div></div>
<div class="cube cubeSmall cubeBlue" id="c3w27"><div class="cubeNum">3w27</div><div class="cubeName"></div></div>
<div class="cube cubeSmall cubeBlue" id="c3w2"><div class="cubeNum">3w2</div><div class="cubeName"></div></div>
<div class="cube cubeThin cubeBlue" id="c3w3"><div class="cubeNum">3w3</div><div class="cubeName"></div></div>
<div class="cube cubeExec cubeBlue" id="c3w4"><div class="cubeNum">3w4</div><div class="cubeName"></div></div>
<div class="cube cubeExec cubeBlue" id="c3w5"><div class="cubeNum">3w5</div><div class="cubeName"></div></div>
<div class="cube cubeExec cubeBlue" id="c3w6"><div class="cubeNum">3w6</div><div class="cubeName"></div></div>
<div class="cube cubeExec cubeBlue" id="c3w7"><div class="cubeNum">3w7</div><div class="cubeName"></div></div>
<div class="cube cubeFat cubeBlue" id="c3w8"><div class="cubeNum">3w8</div><div class="cubeName"></div></div>
<div class="cube cubeFat cubeBlue" id="c3w9"><div class="cubeNum">3w9</div><div class="cubeName"></div></div>
<div class="cube cubeFatShorter cubeBlue" id="c3w10"><div class="cubeNum">3w10</div><div class="cubeName"></div></div>
<div class="cube cubeFatShorter cubeBlue" id="c3w11"><div class="cubeNum">3w11</div><div class="cubeName"></div></div>
<div class="cube cubeFat cubeBlue" id="c3w12"><div class="cubeNum">3w12</div><div class="cubeName"></div></div>

<div class="cube cubeSmallSquare cubeBlue"...

CSS

.displaynone {
  display: none;
}
#seatsContainer {
  position: relative;
  width: 100%;
  height: calc(100vh - 80px);
  border: 1px solid red;
}

#seats {
  width: 100%;
  height: 100%;
}

.seatsLeft {
  width: 250px;
  border: 1px solid red;
  height: 100%;
  display: block;
  margin-top: -1px;
  margin-left: -1px;
  display: inline-block;
}

.seatsRightContainer {
  width: calc(100% - 253px);
  height: calc(100% - 2px);
  display: inline-block;
  position: relative;
  margin-left: -3px;
  top: -2px;
  overflow: hidden;
}

.Container {
  width: 500px;
  height: 500px;
  overflow: hidden;
}

#panzoom {
  height: 1200px;
  width: 2400px;
  overflow: hidden;
}
.seatsBackgroundImage {
    height: 1200px;
  width: 2400px;
  background-image: url(https://navy.deps.mil/peoeis/sites/nen/res/seats.svg);
  background-size: 2400px;
  background-repeat: no-repeat;
  position: absolute;
  z-index: 2;
  pointer-events: none;
}
.seatsCloud {
    display: block;
    height: 1126px;
    width: 2400px;
    position: absolute;
    background: rgba(255, 255, 255, 0.8);
    z-index: 3;
    opacity: 0;/*                                      <-------------------------*/
    pointer-events: none;
    transition: .5s;
}
.aboveCloud {
  z-index: 5;
}
.cube {
   position: absolute;
}
.conference {
   position: absolute;
}
.cubeSmall {
   width: 87px;
   height: 63px;
}
.cubeSmallSquare {
    width: 64px;
    height: 62px;
}
.cubeThin {
    width: 63px;
    height: 84px;
}
.cubeBottom {
    width: 70px;
    height: 86px;
}
.cubeBottomThin {
    width: 64px;
    height: 86px;
}
.cubeExec {
  width: 58px;
  height: 73px;
}
.cubeIntern {
    width: 63px;
    height: 66px;
}
.cubeFat {
    width: 83px;
    height: 74px;
}
.cubeFatter {
    width: 90px;
    height: 74px;
}
.cubeFatShorter {
    width: 83px;
    height: 70px;
}
.cubeBlue {
    background: rgba(0, 110, 255, 0.5);
    box-shadow: inset 0 0 30px white;
}
.cubeYellow {
    background: rgba(255, 177, 0, 0.67);
    box-shadow: inset...

JavaScript

$("#panzoom").panzoom({
          $zoomIn: $(".zoom-in"),
          $zoomOut: $(".zoom-out"),
          $reset: $(".reset")
      });

      $("#panzoom").panzoom("option", {
        increment: .25,
        minScale: .25,
        maxScale: 3,
        duration: 500
      });

      $('.NavToFred').click(function () {
          $("#panzoom").panzoom("zoom", 300),
          $("#panzoom").panzoom("pan", 1000, 100, {relative: false});
      });
      
$("#panzoom").panzoom("zoom", .5),
$("#panzoom").panzoom("pan", -600, -300, {relative: false});