Подключение fancybox к jcarousel + php
 

Здравствуйте уважаемые знатоки JavaScript :)!
Прошу помощи. Задача простая, использовать карусель фоток jcarousel. Фотки грузатся динамически использую метод с php предложеный на сайте разработчиков, при нажатии на фотку она должна отображалаться через fancybox. Все реализовано стандартными функциями с сайта разработчиков http://sorgalla.com карусель работает, вот только фотки отображаются просто в браузере, т.е. не подключается fancybox. Есть подозрение что, так как список изображений карусели формируется динамически то подключать fancybox следует в функциях jcrousel, а вот где и как не могу разобраться, не силен в js. Вот собственно мой код:

...
<script type="text/javascript" src='js/jquery-1.4.4.min.js'></script>
        
        <script type="text/javascript" src='js/jcarousel/jquery.jcarousel.min.js'></script>
    	<script type="text/javascript" src='js/nivoslider/jquery.nivo.slider.js'></script>
      
    	<script type="text/javascript" src='js/fancybox/jquery.mousewheel-3.0.4.pack.js'></script>
        <script type="text/javascript" src='js/fancybox/jquery.easing-1.3.pack.js'></script>
    	<script type="text/javascript" src='js/fancybox/jquery.fancybox-1.3.4.pack.js'></script>
    
        <link rel="stylesheet" type="text/css" href='js/fancybox/jquery.fancybox-1.3.4.css' media='screen' />
        <link rel="stylesheet" href="css/style.css" type="text/css" media="screen, projection" />

        <!--[if lte IE 6]><link rel="stylesheet" href="css/style_ie.css" type="text/css" media="screen, projection" /><![endif]-->
    
<script type="text/javascript">

	$(document).ready(function() {	

	$("a#group").fancybox({
				'titlePosition'	 : 'inside',

                                'overlayColor'	 : '#575757',

				'overlayOpacity'    : 0.7,     

				'transitionIn'	 : 'elastic'
			});
		});
</script>	    
<script type="text/javascript">


    
function mycarousel_itemLoadCallback(carousel, state)
{
    // Check if the requested items already exist
    if (carousel.has(carousel.first, carousel.last)) {
        return;
    }

    jQuery.get(
        'js/jcarousel/dynamic_ajax_php.php',
        {
            first: carousel.first,
            last: carousel.last
        },
        function(xml) {
            mycarousel_itemAddCallback(carousel, carousel.first, carousel.last, xml);
        },
        'xml'
    );
};

function mycarousel_itemAddCallback(carousel, first, last, xml)
{
    // Set the size of the carousel
    carousel.size(parseInt(jQuery('total', xml).text()));

    jQuery('image', xml).each(function(i) {
          carousel.add(first + i, mycarousel_getItemHTML(jQuery(this).text()));
        //  carousel.add(first + i, jQuery(this).text());
    });
};

/**
 * Item html creation helper.
 */
function mycarousel_getItemHTML(url)
{
     var url_m = url.replace(/_s.jpg/g, '_m.jpg');
     return '<a href="'+ url_m +'" title="" id="group"><img src="' + url + '" width="218" height="146"  alt="" /></a>';
};
   

jQuery(document).ready(function() {
    jQuery('#first-carousel').jcarousel({
        // Uncomment the following option if you want items
        // which are outside the visible range to be removed
        // from the DOM.
        // Useful for carousels with MANY items.

        // itemVisibleOutCallback: {onAfterAnimation: function(carousel, item, i, state, evt) { carousel.remove(i); }},
        itemLoadCallback: mycarousel_itemLoadCallback,
         auto:1,
         start:1,
         scroll:1,
         animation:1000,
         
      
    });
    
    jQuery('#second-carousel').jcarousel({

					}
					
				);
    
});

</script>