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">
<link rel="stylesheet" href="http://theconfluencegroup.com/new_site5/css/bootstrap2.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 class="hideme" style="opacity:1;">slide</div>
    <div id="rickrollzarkozing">
        <section id="doublerainbow-doubletour" class="">
            <article id="box-1" class="zoomTarget">
                	<h3><span>TestTestTest</span></h3>

                <div class="svg"></div>
                <p class="p1"><span data-value="665">—</span>&nbsp;%</p>
                <p class="p2" data-value="Les 10&nbsp;% de salariés les plus riches<br />gagnent au minimum 665&nbsp;%<br />du revenu des 10&nbsp;% les plus pauvres"></p>
            </article>
            <article id="box-3" class="zoomTarget">
                	<h3><span>Des logements inabordables</span></h3>

                <div class="svg"></div>
            </article>
            <article id="box-2" class="zoomTarget">
                	<h3><span>La précarité s'aggrave</span></h3>

                <ul>
                    <li><span class="s1"...

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 =...