Usando jCarousel con plantillas jQuery

Question

Estoy intentando utilizar jCarousel en conjunción con las plantillas. Cuando las imágenes son directamente en la página del carrusel funciona perfectamente, pero estoy tratando de hacer que las imágenes dinámicas (sin saber cuáles van a cargar cuando se carga la página) mediante el uso de plantillas.

Esto es lo que hago, tengo este código jQuery para cargar una plantilla (plantilla externa)

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');
});

Este es el código de la plantilla externa

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

Después de cargar la plantilla que tengo el código para inicializar el carrusel, o al menos eso es lo que se supone que debe hacer

$('.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
});

Ahora el problema, el carrusel no está funcionando porque, supongo, que está tratando de inicializarlo antes de la plantilla es en realidad inyecta en la página, lo que provoca que las imágenes se cargan verticalmente y no horizontalmente y no hay carrusel (incluso el elemento emergente de las imágenes no hace nada).

Así que aquí está la pregunta, ¿alguien sabe cómo puedo conseguir este trabajo al usar las plantillas de esta manera? Cómo única para inicializar el carrusel después la plantilla ha sido inyectado en el margen de beneficio?

Answer 1

Una solución ha sido formulado para este problema, con la ayuda de Dave Ward , así que pensé que lo compartiría con los demás, en caso de que alguien llegó junto con el mismo (o problema similar). Que necesitaba para retrasar la inicialización jCarousel y para ello necesitaba llamar jCarousel desde dentro de la $ get () Llamada de la siguiente manera:.

   $.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
        });
    });

Gracias por su ayuda en este caso de Dave

Answer 2

La respuesta de PhysoCoder funciona bien en Firefox y IE pero en Chrome / Safari no parece que se permitió a los botones de desplazamiento. I Código uso más o menos idéntica a la solución elegida y a pesar de que las imágenes se cargan, los botones de flecha no se puede hacer clic. La única manera en que ellos se pusieron a trabajar es añadir otra llamada a jCarousel inmediatamente después de la primera.

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

La adición de la opción de desplazamiento en la primera convocatoria no resolvió, pero llamando .jcarousel de nuevo con 'scroll' parámetro parece hacerlo.