best one so far centering zoomooz to center of visible area #2

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<div id="main">
<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="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="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"...

CSS

body{
    background-color:whitesmoke
        ;
}

#main{
   display:inline;

   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:42%;
    height:80%;


}

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


}
img{
    width:20%;
}
#info img {
   
    width:250px;
    height:250px;


}

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.35,
        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.35,
        duration: 100
    });
    
    });


});