Hello all.
I have a problem with the jCarousel Plugin when i try to display a
second carousel inside one tab.
Ok, the first one displays the right way. When i click the second tab,
the second carousel is displayed but with a width of 60px (that i
don't know how they got there).
My html is this:
<head> Section:
<!-- Import jQuery and plugins -->
<script src="lib/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript" src="lib/jcarousel/lib/
jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="lib/jcarousel/lib/
jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="lib/jcarousel/skins/
tango/skin.css" />
<link rel="stylesheet" type="text/css" href="lib/jcarousel/skins/ie7/
skin.css" />
<script type="text/javascript" src="lib/tabs/general.js" /></script>
<link rel="stylesheet" href="lib/tabs/estilos.css" type="text/css"
media="screen" charset="utf-8" />
</script>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('.first-and-second-carousel').jcarousel();
jQuery('#view2-carousel').jcarousel({
});
});
</script>
and the <body> section:
<!-- tabs views -->
<ul class="htabs">
<li><a href="#top-view1"><img src="images/view1.jpg"></a></li>
<li><a href="#top-view2"><img src="images/view2.jpg"></a></li>
</ul>
<div class="tabs">
<!-- View 1 -->
<div class="tab" id="top-view1">
<ul id="first-carousel"
class="first-and-second-carousel jcarousel-
skin-tango">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
<div clas="tab" id="top-view2">
<ul id="view2-carousel"
class="first-and-second-carousel jcarousel-
skin-tango">
<li>Something</li>
<li>Something</li>
<li>Something</li>
</ul>
</div>
When i see the generated code in Firefox, it displays this for the
second one:
<ul class="jcarousel-list jcarousel-list-horizontal" id="view2-
carousel" style="width: 60px; left: 0px;">
So how do i fix this?
I saw 2 answers, but i can't apply them, because i don't know how.
First:
From: Bhaall
Forcing’ the width of the UL just after rendering the carousel does
the trick, BTW:
$(’ul#first-carousel’).css(”width”,”1008px”);
$(’ul#second-carousel’).css(”width”,”1008px”);
Second:
From:John Fiala
I’ve been using multiple carousels within tabs – the way I handle it
is that I don’t initialize a carousel on page load – I initialize it
when the tab is displayed. That way, it all generates nicely.
Looking forward to trying out this version in the near future.
Anyone can help me just to put the code in the right place? Or have
any solution for this?
thanks in advance
