How to have two javascript dynamically loaded jcarousel on one page ?

[ricotrutt]

Hi,

i'm using the fantastic jCarousel script on my page.
I copied the full code for one carousel twice, changing
That gives me :
var mycarousel_itemList = [ my vars];
function mycarousel_initCallback(carousel)
                                                {
                                                    // Disable autoscrolling if the user clicks the prev or next button.
                                                    carousel.buttonNext.bind(\'click\', function() {
                                                        carousel.startAuto(0);
                                                    });

                                                    carousel.buttonPrev.bind(\'click\', function() {
                                                        carousel.startAuto(0);
                                                    });

                                                    // Pause autoscrolling if the user moves with the cursor over the clip.
                                                    carousel.clip.hover(function() {
                                                        carousel.stopAuto();
                                                    }, function() {
                                                        carousel.startAuto();
                                                    });
                                                };
                                        function mycarousel_itemLoadCallback(carousel, state)
                                        {
                                       
                                            for (var i = carousel.first; i <= carousel.last; i++) {
                                                if (carousel.has(i)) {
                                                    continue;
                                                }

                                                if (i > mycarousel_itemList.length) {
                                                    break;
                                                }

                                                carousel.add(i, mycarousel_getItemHTML(mycarousel_itemList[i-1]));
                                            }
                                        };

                                        /**
                                         * Item html creation helper.
                                         */
                                        function mycarousel_getItemHTML(item)
                                        {
                                            return \'<strong>\' + item.title + \'</strong><br/>\' + item.nb + \' photo(s)\';
                                        };
                               
                                        jQuery(document).ready(function() {
                                            jQuery(\'#mycarousel\').jcarousel({
                                                        auto: 3,
                                                size: mycarousel_itemList.length,
                                                itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}
                                            });
                                        });
                                </script>
                                <div id="wrap">
                                        <ul id="mycarousel" class="jcarousel-skin-ie7">
                                        </ul>
                                </div>
var myfriends_itemList = [my vars];
function myfriends_initCallback(carousel)
                                                {
                                                    // Disable autoscrolling if the user clicks the prev or next button.
                                                    carousel.buttonNext.bind(\'click\', function() {
                                                        carousel.startAuto(0);
                                                    });

                                                    carousel.buttonPrev.bind(\'click\', function() {
                                                        carousel.startAuto(0);
                                                    });

                                                    // Pause autoscrolling if the user moves with the cursor over the clip.
                                                    carousel.clip.hover(function() {
                                                        carousel.stopAuto();
                                                    }, function() {
                                                        carousel.startAuto();
                                                    });
                                                };
                                        function myfriends_itemLoadCallback(carousel, state)
                                        {
                                            for (var i = carousel.first; i <= carousel.last; i++) {
                                                if (carousel.has(i)) {
                                                    continue;
                                                }

                                                if (i > myfriends_itemList.length) {
                                                    break;
                                                }

                                                carousel.add(i, myfriends_getItemHTML(myfriends_itemList[i-1]));
                                            }
                                        };

                                        /**
                                         * Item html creation helper.
                                         */
                                        function myfriends_getItemHTML(item)
                                        {
                                            return \'\' + item.title + \' <div class="texte">Now : \' + item.activite + \'</div>\';
                                        };
                               
                                        jQuery(document).ready(function() {
                                            jQuery(\'#myfriends\').jcarousel({
                                                        auto: 5,
                                                size: myfriends_itemList.length,
                                                itemLoadCallback: {onBeforeAnimation: myfriends_itemLoadCallback}
                                            });
                                        });
                                </script>
                                <div id="wrap">
                                        <ul id="myfriends" class="jcarousel-skin-ie7">
                                        </ul>
                                </div>

It works perfectly on mozilla, but not on IE. I think there is something to do to load two jCarousel on the same page, but i cannot figure out what. Can you help me ?