zoomTo: Hirarchy

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
<body class="zoomContainer">
        <div id="a" class="zoomTarget level0">
            <div id="a1" class="zoomTarget level1">
                <div id="a11" class="zoomTarget level2">a11</div>        
                <div id="a12" class="zoomTarget level2">a12</div>        
                <div id="a13" class="zoomTarget level2">a13</div>        
                <div id="a14" class="zoomTarget level2">a14</div>        
            </div>
            <div id="a2" class="zoomTarget level1">a2</div>
            <div id="a3" class="zoomTarget level1">a3</div>
            <div id="a4" class="zoomTarget level1">a4</div>
        </div>
    </body>

CSS

.level0, .level1, .level2 {
    margin-left:10px;
    margin-top:10px;
    border:1px solid black;
}

.level2 {
    width:80px;
    height:80px;
    float: left;
    background: #aaa;
}

.level1 {
    width:200px;
    height:200px;
    background: #ddd;
    float: left;
    font-size:30px;
    font-family: Helvetica;
}

.level0 {
    width:434px;
    height:434px;
    left:100px;
    top:100px;
    position:absolute;
}