Newest Zoomooz and Colorbox

This a fiddle where both these js libraries are working togehther

by Nick Hulea

HTML

<script src="http://theconfluencegroup.com/new_site5/js/raphael.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/raphael-plugins.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/jquery.zoomooz.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/isotope.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/jquery-plugins.js"></script>
<script src="http://theconfluencegroup.com/new_site5/js/colorbox.js"></script>
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/colorbox.css">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/style.css">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/styles.css">
<div class="span9 offset3" id="service">
    <div class="hero-unit">
         <h1 data-2700="right:100%;opacity:0;color[swing]:rgb(255,255,255);" data-2800="right:0%;opacity:1;color[swing]:rgb(0,0,0);">Services</h1>

    </div>
    <div id="rickrollzarkozing">
        <section id="doublerainbow-doubletour" class="">
            <article id="box-1" class="zoomTarget">
                	<h3><span>Digital Publicity</span></h3>

                <div class="svg"></div>
                <!--<p class="p1"><span data-value="200">—</span>&nbsp;%</p>-->
                <p class="p2" data-value="Our vast existing relationships, combined with new custom research for each client, give our campaigns the best online reach possible. Each correspondence is sent individually so there is no “spamming” or “blasting”. Though we are able to identify large volumes of relevant outlets to pitch, each one is treated like they are the only one that matters and our results speak for themselves."></p>
            </article>
            <article id="box-1" class="zoomTarget">
                	<h3><span>Content Production</span></h3>

                <div class="svg"></div>
                <p class="p2" data-value="Our team creates unique creative content for...

CSS

/*!

 * Bootstrap v2.2.1

 *

 * Copyright 2012 Twitter, Inc

 * Licensed under the Apache License v2.0

 * http://www.apache.org/licenses/LICENSE-2.0

 *

 * Designed and built with all the love in the world @twitter by @mdo and @fat.

 */


/* Generated by http://css.spritegen.com CSS Sprite Generator */
#bd{
position: absolute;
top: 0;
width:100%;

-webkit-overflow-scrolling : touch;
}

#vtab > ul > li.selected{
    border-right: 1px solid #fff !important;
}
#vtab > ul > li {
    border-right: 1px solid #ddd !important;
}
#vtab > div { 
    z-index: 3 !important;
    left:1px;
}


#vtab {
    margin: auto;
    width: 100%;
    height: 100%;
}
#vtab > ul > li {
    width: 64px;
    height: 49px;
    background-color: #fff !important;
    list-style-type: none;
    display: block;
    text-align: center;
    margin: auto;
    padding-bottom: 10px;
    border: 1px solid #fff;
    position: relative;
    border-right: none;
    opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
}
#vtab > ul > li.home {
    background: url('home.png') no-repeat center center;
}
#vtab > ul > li.login {
    background: url('login.png') no-repeat center center;
}
#vtab > ul > li.support {
    background: url('support.png') no-repeat center center;
}
#vtab > ul > li.selected {
    opacity: 1;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
    border: 1px solid #ddd;
    border-right: none;
    z-index: 10;
    background-color: #fafafa !important;
    position: relative;
}
#vtab > ul {
    float: left;
    text-align: left;
    display: block;
    margin: auto 0;
    padding: 0;
    position: relative;
    top: 30px;
}
#vtab > div {
    margin-left: 110px;
    min-height: 382px;
    padding: 6px;
    position: relative;
    z-index: 9;
    -moz-border-radius: 20px;
}
#vtab > div > h4 {
    color:...

JavaScript

$(function () {
    $(".group1").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".group2").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".group3").colorbox({
        rel: 'group3',
        transition: "fade",
        width: "75%",
        height: "75%"
    });
    $(".vimeo").colorbox({
        iframe: true,
        innerWidth: "80%",
        innerHeight: "80%"
    });
});

$(function () {
    var $isotopeContainer = $('#doublerainbow'),
        navPath = [],
        currentPath = 0;

    function listIsotopeEl() {
        navPath = [];
        $('article:not(.isotope-hidden,.pgm)').each(function () {
            navPath.push(parseInt(($(this).attr('id').split('-'))[1]));
        });
    }
    $isotopeContainer.isotope({
        itemSelector: 'article',
        filter: '*:not(.pgm)',
        layoutMode: 'masonry',
        masonry: {
            columnWidth: 270
        },
        animationEngine: 'jquery',
        transformsEnabled: false,
        onLayout: function ($elems, instance) {
            $.doTimeout(800, function () {
                $('header').animate({
                    width: $isotopeContainer.width()
                }, 800, 'easeInOutQuad');
            });
            listIsotopeEl();
        }
    });


    listIsotopeEl();

    var currentScroll = 0,
        zooming = false,
        B = [{}];

    //zoom fuction sets up the on click run 
    function zoom(evt, target) {
        evt.stopPropagation();
        $('article.active').removeClass('active');
        if (target === 0) {
            currentPath = 0;
            zooming = false;
        } else {
            var currentBoxId = parseInt((target.attr('id').split('-'))[1]);
            zooming = true;
            currentPath = navPath.indexOf(currentBoxId) + 1;
            evt.preventDefault();
            //currentScroll =...