zoomTo: Rootchange

by secretgspot

HTML

<script src="https://raw.github.com/jaukia/zoomooz/master/jquery.zoomooz.min.js"></script>
        <h3>Zooming inside a container</h3>
        <div id="outerContainer">
            <div id="container" class="zoomElem">
            <div id="item1" class="zoomElem"></div>
            <div id="item2" class="zoomElem"></div>
            <div id="item2b" class="zoomElem"></div>
            <div id="item3" class="zoomElem">
            <div id="item3b" class="zoomElem"></div>
            </div>
            <div id="item4" class="zoomElem"></div>
            </div>
        </div>
        <div id="navigation">
            <div id="prev">&lt;</div>
            <div id="next">&gt;</div>
        </div>

CSS

/* these are not necessary */

html {
    background-color:#eee;
}

#prev, #next {
    position:absolute;
    width:50px;
    height:50px;
    border:1px solid #aaa;
    background-color:#dca;
    color:white;
    z-index:10;
    font-size:40px;
    line-height:45px;
    text-align:center;
    font-family:Helvetica, sans-serif;
    cursor:pointer;
    cursor:hand;
}

#prev:hover,#next:hover {
    background-color:#ba9;
    border: 1px solid #999;
}

#navigation {
    width:800px;
    position:relative;
    margin-top:2em;
    margin-left:auto;
    margin-right:auto;
    height:70px;
}

#prev {
    left:0px;
}

#next {
    right:0px;
}

#container {
    margin:0;
    padding:0;
    width:800px;
    height:600px;
    position:relative;
}

#outerContainer {
    margin:0;
    padding:0;
    width:800px;
    height:600px;
    border:1px solid #ccc;
    background-color: white;
    overflow:hidden;
    margin-left:auto;
    margin-right:auto;
    margin-top:1em;
}

h3 {
    font-family: Helvetica Neue, Helvetica, sans-serif;
    display:block;
    width:800px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5%;
    color:#444;
}

div {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

#item1 {
    background-color:#fcc;
    position:absolute;
    left:50px;
    top:50px;
    width:300px;
    height:200px;
    border:1px solid red;
}

#item2 {
    background-color:#ccf;
    position:absolute;
    bottom:40px;
    right:40px;
    width:300px;
    height:200px;
    border:1px solid blue;
}

#item3 {
    background-color:#cfc;
    position:absolute;
    top:0px;
    right:100px;
    width:300px;
    height:200px;
    border:1px solid green;
    -webkit-transform: rotate(10deg) translate(0px,0px);
    -moz-transform: rotate(10deg) translate(0px,0px);
    -o-transform: rotate(10deg) translate(0px,0px);
}

#item3b {
    background-color:#cff;
    position:absolute;
    top:0px;
    left:0px;
    width:200px;
    height:100px;
    border:1px solid cyan;
   ...

JavaScript

var zoomElemElements = ["#container","#item1","#item2","#item2b","#item3","#item3b","#item4"];
            var zoomElemIndex = 0;

            $(document).ready(function() {
                $.zoomooz.setup({root:$("#container"),targetsize:0.8});

                $(".zoomElem").click(function(evt) {
                    evt.stopPropagation();
                    $(this).zoomTo({debug:true});
                });

                $("#container").zoomTo();

                $("#next").click(function(evt) {
                    zoomElemIndex++;
                    if(zoomElemIndex>=zoomElemElements.length) {
                        zoomElemIndex-=zoomElemElements.length;
                    }
                    $(zoomElemElements[zoomElemIndex]).zoomTo({debug:true});
                });

                $("#prev").click(function(evt) {
                    zoomElemIndex--;
                    if(zoomElemIndex<0) {
                        zoomElemIndex+=zoomElemElements.length;
                    }
                    $(zoomElemElements[zoomElemIndex]).zoomTo({debug:true});
                });
            });