将 jCarousel 与 jQuery 模板一起使用答案

【问题标题】：Using jCarousel with jQuery templates将 jCarousel 与 jQuery 模板一起使用
【发布时间】：2011-06-03 19:11:49
【问题描述】：

我正在尝试将 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
});

现在的问题是，轮播无法正常工作，因为我认为它试图在模板实际注入页面之前对其进行初始化，从而导致图像垂直加载而不是水平加载并且没有轮播（甚至图像的悬停没有任何作用）。

所以问题来了，有谁知道我在以这种方式使用模板时如何使它工作？如何仅在模板注入标记后初始化轮播？

【问题讨论】：

标签： jquery jquery-plugins jcarousel jquery-templates

【解决方案1】：

在Dave Ward 的帮助下，已经为这个问题制定了解决方案，所以我想我会与其他人分享，以防有人遇到相同（或类似的问题）。我需要延迟初始化 jCarousel，为此我需要从 $.get() 调用中调用 jCarousel，如下所示：

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

感谢您对 Dave 的帮助

【讨论】：

【解决方案2】：

PhysoCoder 的答案在 Firefox 和 IE 中运行良好，但在 Chrome/Safari 中，滚动按钮似乎没有启用。我使用的代码与选择的解决方案几乎相同，即使加载了图像，箭头按钮也无法点击。我让他们工作的唯一方法是在第一个调用之后立即添加另一个对 jcarousel 的调用。

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

在第一次调用中添加滚动选项并没有解决它，但使用 'scroll' 参数再次调用 .jcarousel 似乎可以做到。

【讨论】：