JCarousellite does not work from within Fancybox

Question

I have have a link that opens up a Fancybox(also tried Colorbox) to an image gallery page. This gallery page uses jCarousellite for thumbnail navigation then loads the large image using an ajax call. When i access this gallery page directly, everything is peachy and all the JQuery fires correctly. When i load it using Fancybox, none of the jquery on the loaded gallery page works. Ive also tired implementing this using a callback function on 'onComplete' for Fancybox, still to no avail. The Jquery below used to be split between the calling page and the gallery page. Since Fancybox seems to strip out tags, i placed all jquery on the calling page. Still....nothin'

Jquery

<script>

$(document).ready(function() {
$("a.gallery-link").fancybox({
    'padding': 5,
    'margin': 0,
    'scrolling': 'no',
    'overlayColor': '#000',

});

    $("#large-image img").fadeOut(0)

    $.ajax({
         url: '{{images.0.img.url}}',
         success: function(html){
                 $("#large-image img").attr("src",'{{images.0.img.url}}');
                 $("#large-image img").attr("alt",'{{images.0.title }}');
                 $("#large-image img").fadeIn('slow')


         }
    });

    //click thumb and image load where large image is
    $(".thumbs li a").live("click", function (){
            var img_url = this
            $.ajax({
                    url: img_url,
                    async: false,
                    success: function(html){
                            $("#large-image img").attr("src", img_url).fadeIn('slow');

                    }
            });

            $(this).addClass("active");

            return false;
    });

    $(".thumbs").jCarouselLite({
        btnNext: ".move-right",
        btnPrev: ".move-left",
        visible: 5,
        circular: false
    });

});

    </script>

html

<a href="/gallery/heating" class="gallery-link" >heating gallery</a>

gallery html:

<div class="gallery">

    <div id="large-image">
        <img src="" alt="" />

        <div class="large-image-content"></div>
        <div class="large-image-title"></div>
    </div>

    <div class="thumbs">
        <div class="move-left">left</div>
        <ul>
            <li><a href="/static/img/gallery/1/1985selfportrait.jpg" title="title"><img src="/static/img/gallery/1/thumbs/1985selfportrait.jpg" alt="" width="145"/></a></li>   
            <li><a href="h/static/img/gallery/1/chriskeatinghdr.jpg" title="test 2"><img src="/static/img/gallery/1/thumbs/chriskeatinghdr.jpg" alt="" width="145"/></a></li>       

            <li><a href="/static/img/gallery/1/7988_1241215240_submedium.jpg" title="test3 "><img src="/static/img/gallery/1/thumbs/7988_1241215240_submedium.jpg" alt="" width="145"/></a></li>

        </ul>
        <div class="move-right">right</div>
    </div>

</div>