centering zoomooz to center of visible area #2

by Nick Hulea

HTML

<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="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 src="http://theconfluencegroup.com/new_site6/svg/brain.svg" style="float:left;"/></a>

<a href="#" data-toggle="#div8" class=" link"><img src="http://theconfluencegroup.com/new_site6/svg/ballon.svg" style="float:left;"/></a>

    </div>
</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...

CSS

body {
    background-color:whitesmoke;
}
#linkbar {
}
#info ul {
    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 {
    width:80%;
    height:80%;
}
#info img {
    width:100%;
}
img {
    width:20%;
}

JavaScript

$(document).ready(function () {

    $(function () {

        $.main.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
        $('#container_services').fadeIn('slow');
        $("#info ul").hide();
        $(selector).fadeIn('slow');
        $(selector).zoomTo({
            targetsize: 0.45,
            duration: 1000
        });

    });

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

    });

    $('body').on("click", function (e) {
        $('#container_services').fadeOut('slow');

    });

});