Jump to content
  • 0

tabs + jcarousel


Dioni$$
 Share

Question

Добрый день.

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

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

вобщем вкладок 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'
});
});
});

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

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

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

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0

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

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


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

Link to comment
Share on other sites

  • 0

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

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

а ваш код в данном случае получился излишним. но я попробовал - и мне просто выдало список (ну 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.

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

Edited by Dioni$$
Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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


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

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

Link to comment
Share on other sites

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy