Использование jCarousel с шаблонами jQuery - PullRequest
Новая
       7

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

2 голосов
/ 05 января 2011

Я пытаюсь использовать 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
});

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

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

Ответы [ 2 ]

2 голосов
/ 05 января 2011

Для этой проблемы было сформулировано решение с помощью Дейва Уорда , поэтому я подумал, что поделюсь им с другими, если кто-то придет с такой же (или схожей проблемой). Мне нужно было отложить инициализацию 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
        });
    });

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

1 голос
/ 10 ноября 2011

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

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

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

...