zoomooz latest edit

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/jquery.zoomooz.js"></script>
<header>
<a href="#" data-toggle="#div1" class=" link">link 1</a>

<a href="#" data-toggle="#div2"
    class=" link">link 2</a>

<a href="#" data-toggle="#div3" class=" link">link 3</a>

    <a
    href="#" data-toggle="#div4" class=" link">link 4</a>
</header>
<div id="container">
<a href="#" data-toggle="#div1" class=" link">link 1</a>

<a href="#" data-toggle="#div2"
    class=" link">link 2</a>

<a href="#" data-toggle="#div3" class=" link">link 3</a>

    <a
    href="#" data-toggle="#div4" class=" link">link 4</a>
        <div id="info">
            <ul id="div1">
                <img src="http://placekitten.com/g/200/300" />
                <p>div 2</p>
            </ul>
            <ul id="div2">div 2</ul>
            <ul id="div3">div 3</ul>
            <ul id="div4">div 4</ul>
        </div>
</div>

CSS

header {
    position:fixed;
    top:0;
    left:0;
    width:100%;
}
ul {
    display: none;
    float:right;
}
a {
    display:block;
    background-color:#000;
    color:#fff;
    padding:10px;
    margin:2px;
    display:inline-block;
}
a:hover {
    background-color:#222;
}
#info {
    width:400px;
    height:200px;
}
#container {
    max-width:1024px;
    position:relative;
}
body {
    background-color:#999;
}

JavaScript

$(function() {
    
    $.zoomooz.setup({root:$('#container'), targetsize: 0.8, debug:true});
    
    function zoom(evt, target) {
        evt.stopPropagation();
        if (target ==+ 0) {
            //$('body').css('overflow', 'auto');
            $('#container').zoomTo({targetsize:1.0});
        } else {
            evt.preventDefault();
            //$('body').css('overflow', 'hidden');
            target.addClass('active').zoomTo();
        }
    }
    
    $('a').click(function(evt) {
        zoom(evt, $(this));
    });
    
    $(window).click(function(evt) {
        zoom(evt, 0);
    });
    
});
$("a[data-toggle]").on("click", function (e) {
    e.preventDefault(); // prevent navigating
    var selector = $(this).data("toggle"); // get corresponding element
    $("ul").hide();
    $(selector).fadeIn(1000);
    $(selector).zoomTo({
        targetsize: 2,
        duration: 100
    });
    
    });