tabs + jcarousel

[Dioni$$]

Добрый день.

Такая проблема:

есть табы (вкладки) - реализованы с помощью скрипта

вобщем вкладок 3.

на второй и третьей карусели (jcarousel).

так вот по началу выдавало ошибку типа

jCarousel: No width/height set for items. This will cause an infinite loop. Aborting...

тогда я присвоил второму табу id="tab2" и инициализацию карусели записал как

$(document).ready( function() {
					$('#tab2').on('click', function(){
				        jQuery('#mycarousel').jcarousel({
				        visible: 3,
						scroll: 1,
						animation: 'slow'
				    });
				    });
				});

ошибка пропала - карусель появляется. токо не работает (.

подскажите плиз как решить. или может есть готовое решение..

вобщем рад любой помощи

[Great Rash]

Ошибка выдавась из-за того, что, вероятно, содержимое таба было скрыто при помощи diaplay: none;, при таком способе скрытия блока, скрипт не сможет получить его ширину и высоту (они всегда будут равны 0).

Нужно инициализировать скрипт карусели после того как блок появится на странице. Например так:

$('#tab2').on('click', function() {
  $('#tab2_content').show('fast', function() {
    $('#mycarousel').jcarousel();
  });
});

[Dioni$$]

ну ошибка то уже и при моем коде не выходит. и карусель появилась.

вот только она не крутится, стрелочки не нажимаются.. вобщем не папшет как-то..

а ваш код в данном случае получился излишним. но я попробовал - и мне просто выдало список (ну ul li)

вот код который использует скрипт

<div class="section">
  <ul class="tabs">
    <li class="current">1-я вкладка</li>
    <li>2-я вкладка</li>
  </ul>
  <div class="box visible">
    Содержимое первого блока
  </div>
  <div class="box">
    Содержимое второго блока
  </div>
</div><!-- .section -->

и сам скрипт

(function($) {
$(function() {

  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current')
          .parents('div.section').find('div.box').eq(i).fadeIn(150).siblings('div.box').hide();
      });
    });
  });

})
})(jQuery)

ну и цсс

.box {
  display: none; /* по умолчанию прячем все блоки */
}
.box.visible {
  display: block; /* по умолчанию показываем нужный блок */
}

тут вообще не используется ни id ни классов (уникальных). просто я уже для себя дописал для второго таба id.

[Dioni$$]

че никто больше не сталкивался с такой проблемой?

[rus]

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

[Great Rash]

Ну и где в вашем коде инициализация карусели?

[Dioni$$]

Ну и где в вашем коде инициализация карусели?

ну я думал вот это

$(document).ready( function() {
                                        $('#tab2').on('click', function(){
                                        jQuery('#mycarousel').jcarousel({
                                        visible: 3,
                                                scroll: 1,
                                                animation: 'slow'
                                    });
                                    });
                                });

я пробовал предложенный вами код - но че-то не оно

блин ребята - такой тормоз из-за этой карусели! кто в курсе - подсобите.

а я наверное попробую какой другой слайдер впихнуть - хотя карусель родная уже..

Edited September 24, 2012 by Dioni$$

[Great Rash]

я пробовал предложенный вами код - но че-то не оно

А кто сказал, что это готовый код? Я от балды, для примера, изложил идею. Из изложенного мной кода все должно быть понятно.

[Dioni$$]

ну вот вы говорите

Нужно инициализировать скрипт карусели после того как блок появится на странице.

ну я так и сделал изначально

$('#tab2').on('click', function(){
        jQuery('#mycarousel').jcarousel({

тут вроде бы тоже все понятно - при нажатии на кнопку таб2 (естественно содержимое блока и так у нас показывается) - инициализируем карусель.

возможно я плохо сформулировал вопрос.

попробую еще раз:

ошибки не возникает (ширина высота определяется), карусель появляется, только не крутится и стрелки не работают вперед назад

[Great Rash]

В том то и дело, что не так. А вот так:

$('#tab2').on('click', function() { // при нажатии на таб мы показываем определенный блок, который соответствует определенному табу
  $('#tab2_content').show('fast', function() { // после того как отработает .show(), т.е. блок отобразится, запустится функция-коллбек
    $('#mycarousel').jcarousel(); // запускаем карусель, только после того как отработает .show();
  });
});

Теперь понятно? Если я вас неправильно понял, то потрудитесь создать демо-пример вот на этом сайте и кинуть ссылку.

[Dioni$$]

потрудитесь создать демо-пример вот на этом сайте и кинуть ссылку.

сделал - вот ссылка

вот только в том прикол - что там оно работает вообще без шаманства! вот как это понимать?

[keltanas]

Попробуйте использовать Twitter Bootstrap

Табы и Карусель

Там точно все работает без шаманства.

[Great Rash]

вот только в том прикол - что там оно работает вообще без шаманства! вот как это понимать?

Uncaught TypeError: Object [object Object] has no method 'jcarousel'

Как это работает? Не должно.

[Dioni$$]

keltanas - спасибо. попробуем применить.

Как это работает? Не должно.

я вот сам в шоке. а у вас не работает?

Edited September 26, 2012 by Dioni$$

[Great Rash]

я вот сам в шоке. а у вас не работает?

Я вообще-то даже текст ошибки привел вам, на случай если вы консолью пользоваться не умеете.