2

テンプレートと組み合わせて 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
});

問題は、テンプレートが実際にページに挿入される前にカルーセルを初期化しようとしていると思われるため、カルーセルが機能していないため、画像が水平ではなく垂直に読み込まれ、カルーセルが表示されない (画像は何もしません）。

ここに質問があります。この方法でテンプレートを使用するときに、これを機能させる方法を知っている人はいますか? テンプレートがマークアップに挿入された後にのみカルーセルを初期化する方法は?

4

2 に答える 2

2

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

この1つのデイブであなたの助けをありがとう

于 2011-01-05T15:09:21.993 に答える
1

PhysoCoder の回答は Firefox と IE ではうまく機能しますが、Chrome/Safari ではスクロール ボタンが有効にならないようです。選択したソリューションとほぼ同じコードを使用していますが、画像がロードされても矢印ボタンをクリックできません。それらを機能させる唯一の方法は、最初の呼び出しの直後に jcarousel への別の呼び出しを追加することです。

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

最初の呼び出しでスクロールオプションを追加しても解決しませんでしたが、「スクロール」パラメーターを使用して.jcarouselを再度呼び出すと解決するようです。

于 2011-11-10T15:56:29.977 に答える