Как установить начальное изображение jCarousel на основе щелчка мыши в отдельной галерее изображений?

У меня есть страница, содержащая слайдер jCarousel (в div) и div, который содержит список миниатюр. Карусель скрыта при начальной загрузке страницы, а миниатюры видны. Чего я пытаюсь добиться, так это того, что когда пользователь нажимает на определенную миниатюру, список миниатюр (или, я должен сказать, галерея) исчезает, в то время как карусель становится видимой С увеличенной версией изображения нажатой миниатюры, показанной первой на карусель. Я попытался установить для параметра конфигурации карусели «старт» переменную, содержащую идентификатор миниатюры, на которую нажали, но это дало мне странные результаты. Любая помощь будет принята с благодарностью! Вот мой код:

<script type="text/javascript">
$(document).ready(function() {
    var currImage;
    $('#carousel').hide();
    $('.thumb').click(function(){
        $('#thumbs').fadeOut('slow');
        currImage = $(this).attr('id');

        $('#mycarousel').jcarousel({
            start: currImage,
            visible: 1,
            scroll: 1  
        });
        $('#carousel').fadeIn('slow');      
    }); 
});
</script>
<div id="thumbs">
    <ul class="thumb-display">
        <li>
            <a class="thumb" href="#" id="1">
                <img src="pic1-thumb.jpg" />
            </a>
        </li>
        <li>
            <a class="thumb" href="#" id="2">
                <img src="pic2-thumb.jpg" />
            </a>
        </li>
    </ul>
</div>
<div id="carousel">
    <ul id="mycarousel" class="jcarousel-skin-tango">
        <li><img src="pic1-large/></li>
        <li><img src="pic2-large/></li>
    </ul>
</div>

javascript jquery jcarousel
person selbay84    schedule 22.02.2012    source источник

Ответы (2)


arrow_upward
0
arrow_downward

pphou, ваше предполагаемое использование jCarousel очень похоже на Карусель с внешними элементами управления.

Хитрость заключается в том, чтобы настроить миниатюры как внешние элементы управления в функции initCallback.

Код будет примерно таким:

JavaScript:

$(document).ready(function() {
    $thumbs = $('#thumbs');
    $carousel = $('#mycarousel').hide();
    $carousel.jcarousel({
        visible: 1,
        scroll: 1,
        initCallback: function(carousel) {
            $thumbs.find('a').on('click', function() {
                carousel.scroll($.jcarousel.intval($(this).attr('id')));
//              carousel.scroll($.jcarousel.intval($(this).index()));//may work, if so then omit ids from the HTML
                $thumbs.fadeOut('slow');
                $carousel.fadeIn('slow');
                return false;
            });
        }
    });
});

не проверено

Возможно, вам придется немного поиграть с кодом, чтобы получить именно то, что вы хотите.

Вам также нужно будет установить обратный путь к миниатюрам из карусели. Я не касался этого аспекта.

Не забудьте пронумеровать идентификаторы эскизов от 0 (ноль), как указывает gregL.

person Beetroot-Beetroot    schedule 22.02.2012
comment
Большое спасибо за помощь! Я последовал вашему предложению и стал на шаг ближе, но теперь проблема в том, что карусель видна при начальной загрузке. Все остальное работает нормально. Я попытался немного изменить код, но это никуда не привело. - person selbay84; 23.02.2012
comment
Вероятно, это потому, что мой код обращается только к #mycarousel, а не к #carousel. Попробуйте $carousel = $('#carousel').hide(); и $mycarousel = $('#mycarousel'); в верхней части функции, тогда у вас есть средства независимого управления контейнером и самой каруселью. В моем коде также отсутствует $ в строках 9 и 10, но вы, вероятно, заметили это. Если вы все еще не можете заставить его работать, попробуйте создать его jsfidle (или упрощение), чтобы мне было с чем поиграть. - person Beetroot-Beetroot; 23.02.2012
comment
Исправление - я не пропустил $ в строках 9/10. Это было правильно в первый раз. Я настроил скрипт - jsfiddle.net/sbbm4/2 - person Beetroot-Beetroot; 23.02.2012
comment
СПАСИБО БОЛЬШОЕ Свекла!!! Теперь это работает как шарм. Отличное решение! Мне было трудно понять документацию jCarousel, и я был действительно сбит с толку ее параметрами и тем, что нужно подключать. Также большое спасибо за то, что познакомили меня с jsFiddle. Очень полезный инструмент! :) - person selbay84; 23.02.2012
comment
@pphou Нет ничего постыдного в том, чтобы не понимать документацию jCarousel - могло быть и лучше. Я нашел источник примеров лучшим способом обучения. - person Beetroot-Beetroot; 25.02.2012

arrow_upward
1
arrow_downward

Похоже, что простой ответ заключается в том, что start основано на 0, а не на 1.

Итак, попробуйте использовать:

    $('#mycarousel').jcarousel({
        start: currImage - 1,
        visible: 1,
        scroll: 1  
    });

для инициализации jCarousel.

В качестве альтернативы, может ли плагин правильно определять размеры изображений? Если нет, попробуйте добавить явные атрибуты height и width или стили CSS.

Кроме того, идентификаторы, вероятно, не лучше, чем «1», «2» и так далее. Вместо этого используйте атрибут data-imagenum или аналогичный.

person GregL    schedule 22.02.2012
comment
Спасибо, приятель, но это предложение не имело никакого эффекта. - person selbay84; 22.02.2012