Using jCarousel with jQuery templates

I am attempting to use jcarousel in conjunction with templates. When the images are directly in the page the carousel it works perfectly, but I'm trying to make the images dynamic (not knowing which ones will load when the page loads) by using templates.

Here's what I do, I have this jQuery code to load a template (external template)

var images = {
    imageItems: [
        { path: '../Content/img/strip/strip_1.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_2.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_3.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_1.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_2.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_3.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_1.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_3.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_2.jpg', name: 'Photo' },
        { path: '../Content/img/strip/strip_1.jpg', name: 'Photo' }
        ]
};

$.get('/jQueryTemplates/_photographerImagesSlideShow.tmpl.htm', function (templates) {
    $('body').append(templates);
    $('#imageSlideShowTemplate').tmpl(images).appendTo('.slidestrip');
});

This is the code from the external template

<script id="imageSlideShowTemplate" type="x-jquery-tmpl">    
    <ul id="slidestriplist" class="jcarousel-skin-tango">
        {{each imageItems}}
            <li>{{tmpl($value) '#slideShowImage'}}</li>
        {{/each}}
    </ul>
</script>

<script id="slideShowImage" type="x-jquery-tmpl">
    <a href="#" rel="lightbox"><img src="${path}" width="150" height="126" alt="${name}" /></a>
</script>

After I load the template I have this code to initialize the carousel, or at least that's what it's supposed to do

$('.slidestrip img').each(function () {
    $(this).hover(function () {
        $(this).stop().animate({ opacity: 1.0 }, 500);
    },
        function () {
            $(this).stop().animate({ opacity: 0.5 }, 500);
        });
});

$('#slidestriplist').jcarousel({
    visible: 6
});

Now the problem, the carousel isn't working because, I assume, it's trying to initialize it before the template is actually injected into the page, thus causing the images to load vertically and开发者_运维百科 not horizontally and there is no carousel (even the hover of the images does nothing).

So here's the question, does anyone know how I can get this working when using templates in this manner? How to only initialize the carousel after the template has been injected into the markup?

---

A solution has been formulated for this issue, with the help of Dave Ward, so I thought I would share it with others, in case someone came along with the same (or similar issue). I needed to delay initializing jCarousel and to do this I needed to call jCarousel from within the $.get() call like this:

   $.get('/jQueryTemplates/_photographerImagesSlideShow.tmpl.htm', function (templates) {
        $('body').append(templates);
        $('#imageSlideShowTemplate').tmpl(images).appendTo('.slidestrip');

        //now load our carousel and add the hover affect to the images
        $('.slidestrip img').each(function () {
            $(this).hover(function () {
                $(this).stop().animate({ opacity: 1.0 }, 500);
            },
            function () {
                $(this).stop().animate({ opacity: 0.5 }, 500);
            });
        });

        $('#slidestriplist').jcarousel({
            visible: 6
        });
    });

Thanks for your help on this one Dave

---

PhysoCoder's answer works well in Firefox & IE but in Chrome/Safari the scroll buttons don't seem to get enabled. I use code pretty much identical to the chosen solution and even though the images get loaded, the arrow buttons are not clickable. The only way I got them to work is to add another call to jcarousel immediately after the first one.

$('#slidestriplist').jcarousel('scroll',1); 

Adding the scroll option in the first call didn't solve it but calling .jcarousel again with 'scroll' parameter seems to do it.