Utilisation de jCousel avec des modèles jQuery

Question

J'essaie d'utiliser jcarousel en conjonction avec des modèles. Lorsque les images sont directement dans la page, le carrousel fonctionne parfaitement, mais j'essaie de rendre les images dynamiques (ne sachant pas lesquelles vont se charger lorsque la page se charge) en utilisant des modèles.

Voici ce que je fais, je le code jQuery pour charger un modèle (modèle externe)

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

Voici le code à partir du modèle externe

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

Après que je charge le modèle I ont ce code pour initialiser le carrousel, ou tout au moins c'est ce qu'il est censé faire

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

Maintenant le problème, le carrousel ne fonctionne pas parce que, je suppose, il essaie de l'initialiser avant que le template ne soit effectivement injecté dans la page, provoquant ainsi le chargement vertical des images et non horizontalement et il n'y a pas de carrousel des images ne fait rien).

Alors, voici la question, est-ce que quelqu'un sait comment je peux obtenir ce travail lorsque vous utilisez des modèles de cette manière? Comment initialiser uniquement le carrousel après le modèle a été injecté dans le balisage?

Answer 1

Une solution a été formulée pour ce problème, avec l'aide de Dave Ward, alors j'ai pensé que je la partagerais avec d'autres, au cas où quelqu'un viendrait avec le même problème (ou un problème similaire). Je avais besoin de retarder l'initialisation jCarousel et pour ce faire, je devais appeler jCarousel à partir du .get $() appel comme celui-ci:

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

Merci pour votre aide sur celui-ci Dave

Answer 2

réponse de PhysoCoder fonctionne bien dans Firefox & IE mais dans Chrome/Safari les boutons de défilement ne semblent pas activés. J'utilise du code à peu près identique à la solution choisie et même si les images sont chargées, les boutons fléchés ne sont pas cliquables. La seule façon de les faire fonctionner est d'ajouter un autre appel à jcarousel immédiatement après le premier.

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

Ajout de l'option de défilement dans le premier appel n'a pas résolu mais appeler paramètre .jcarousel à nouveau avec « défilement » semble le faire.