我正在尝试将 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>
加载模板后,我有这段代码来初始化轮播,或者至少这是它应该做的
$('.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
});
现在的问题是,轮播不起作用,因为我认为它试图在模板实际注入页面之前对其进行初始化,从而导致图像垂直加载而不是水平加载,并且没有轮播(甚至悬停图像什么都不做)。
所以这里的问题是,有谁知道我在以这种方式使用模板时如何使它工作?如何仅在模板注入标记后初始化轮播?