Использование jCarousel с шаблонами jQuery

Question

Я пытаюсь использовать jcarousel в сочетании с шаблонами. Когда изображения находятся непосредственно на странице, карусель работает отлично, но я пытаюсь сделать изображения динамическими (не зная, какие из них будут загружаться при загрузке страницы), используя шаблоны.

Вот что я делаю, у меня есть этот код JQuery для загрузки шаблона (внешний шаблон)

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

Это код из внешнего шаблона

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

После того как я загрузить шаблон I иметь этот код для инициализации карусели или, по крайней мере, это то, что он должен делать

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

Теперь проблема, карусель не работает, потому что, я полагаю, она пытается инициализировать ее до того, как шаблон фактически будет введен на страницу, что приведет к загрузке изображений вертикально, а не по горизонтали, и нет карусели (даже зависание изображений ничего не делает).

Итак, вот вопрос, знает ли кто-нибудь, как я могу заставить это работать при использовании шаблонов таким образом? Как только инициализировать карусель после шаблон был введен в надбавку?

Answer 1

Решение по этой проблеме было сформулировано с помощью Dave Ward, поэтому я решил поделиться им с другими, если кто-то пришел с тем же (или подобным вопросом). Мне нужно отложить инициализацию jCarousel и сделать это мне нужно позвонить jCarousel внутри $ .get() вызова, как это:

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

Спасибо за вашу помощь в этом один Дэйв

Answer 2

ответ PhysoCoder в хорошо работает в Firefox & IE, но в Chrome/Safari кнопки прокрутки, похоже, не включены. Я использую код, очень похожий на выбранное решение, и даже при том, что изображения загружаются, кнопки со стрелками не изменяются. Единственный способ заставить их работать - добавить еще один вызов jcarousel сразу после первого.

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

Добавление опции прокрутки в первом вызове не решить эту проблему, но называя .jcarousel снова «прокручивать» параметр, кажется, сделать это.