centering zoomooz

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<div id="main">
  <div id="leftbar">
    <a href="#" data-toggle="#div1" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/note.svg" style="float:left;"/></a>
    <a href="#" data-toggle="#div2" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/network.svg" style="float:left;"/></a>
    <a href="#" data-toggle="#div3" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/light.svg" style="float:left;"/></a>
    <a href="#" data-toggle="#div4" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/image.svg" style="float:left;"/></a>
  </div>
  <div id="container_services" align="center">
    <div id="info" style="" align="center">
      <ul id="div1"><img src="http://placekitten.com/g/604/300" />
        <p>div 2</p>
      </ul>
      <ul id="div2"> <img src="http://placekitten.com/g/603/300" />
        <p>div 2</p>
      </ul>
      <ul id="div3"> <img src="http://placekitten.com/g/601/300" />
        <p>div 2</p>
      </ul>
      <ul id="div4"> <img src="http://placekitten.com/g/600/300" />
        <p>div 2</p>
      </ul>
      <ul id="div5"><img src="http://placekitten.com/g/604/300" />
        <p>div 2</p>
      </ul>
      <ul id="div6"> <img src="http://placekitten.com/g/603/300" />
        <p>div 2</p>
      </ul>
      <ul id="div7"> <img src="http://placekitten.com/g/601/300" />
        <p>div 2</p>
      </ul>
      <ul id="div8"> <img src="http://placekitten.com/g/600/300" />
        <p>div 2</p>
      </ul>
    </div>
  </div>
  <div id="rightbar">
    <a href="#" data-toggle="#div5" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/g_cap.svg" style="float:left;"/></a>
    <a href="#" data-toggle="#div6" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/city.svg" style="float:left;"/></a>
    <a href="#" data-toggle="#div7" class=" link"><img...

CSS

body {
  background-color: red;
}

#main {
  display: inline;
  position: relative;
  top: 100px;
  background-color: #000;
}

#linkbar {}

#info ul:not(#div2) {
  display: none;
}

#leftbar a {
  color: #fff;
  padding: 10px;
  margin: 2px;
  display: inline-block;
  width: 20%;
}

#rightbar a {
  color: #fff;
  padding: 10px;
  margin: 2px;
  display: inline-block;
  width: 20%;
}

#linkbar a:hover {}

#container_services {
  border: 5px solid #000;
  width: 250px;
  height: 250px;
}

#info {
  width: 250px;
  height: 250px;
}

img {
  width: 20%;
}

JavaScript

$(document).ready(function() {
  $(function() {

    $.zoomooz.setup({
      root: $('#container_services')
    });

    function zoom(evt, target) {
      evt.stopPropagation();
      if (target == +0) {
        //$('body').css('overflow', 'auto');
        $('#container_services').zoomTo({
          targetsize: 1
        });
      } else {
        evt.preventDefault();
        //$('body').css('overflow', 'hidden');
        $(target).addClass('active').zoomTo();
      }
    }

    $('#leftbar,#rightbar').click(function(evt) {
      zoom(evt, $(this));
    });

    $(window).click(function(evt) {
      zoom(evt, 0);
    });

  });
  $("#rightbar a[data-toggle]").on("click", function(e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $("#info ul").hide();
    $(selector).show();
    $(selector).zoomTo({
      targetsize: 0.55,
      duration: 100
    });

  });

  $("#leftbar a[data-toggle]").on("click", function(e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $("#info ul").hide();
    $(selector).show();
    $(selector).zoomTo({
      targetsize: 0.55,
      duration: 100
    });

  });


});