[jQuery] show and hide jcarousel lite plug in

[surreal5335]

I have a set up I am creating where when the user clicks on an image
in one carousel it will display another carousel that contains
pictures in it to view in a larger window. I have been able to get the
carousel on both to work, but I am having trouble getting the second
to show and hide and pick from a certain set of pictures when a
picture in the first carousel is clicked.

I have tried using a javascript switch statment (which works fine in
other wbesites that dont use jquery) and also the code below to
achieve the effect. Neither have worked thus far.


var currentDiv = 1;
function showMe(n) {
        $("#ex_"+currentDiv).hide();
        $("#ex_"+n).style.display = "block";
currentDiv = n;
}



for the html code to handle the click event, I used:



<div class="gallery" id="gallery" >
      <ul>
         <li><a href="#"><img src="/photo_site/thumbs/6.png" alt="1"
height="160" width="160" id="6" onclick="showMe(1)"></a></li>
         <li><a href="#"><img src="/photo_site/thumbs/holga.png"
alt="3" height="160" width="160" id="6" onclick="showMe(5)"></a></li>
         <li><a href="#"><img src="/photo_site/thumbs/land.png"
alt="3" height="160" width="160" id="land" onclick="showMe(6)"></a></
li>
     </ul>
</div>



For the sub carousels I used this code:



<div class="pictures" id="pictures">
     <ul id="misc" id="ex_1" style="display:none;">
         <li><img src="/photo_site/thumbs/pictures/misc/tm1.png"
alt="1" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/misc/tm3.png"
alt="2" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/misc/tm4.png"
alt="3" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/misc.png" alt="4"
height="160" width="160"></li>
     </ul>
     <ul id="luminous" id="ex_5" style="display:none;">
         <li><img src="/photo_site/thumbs/pictures/luminous/th1.png"
alt="1" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/luminous/th3.png"
alt="2" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/luminous/th4.png"
alt="3" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/luminous/th5.png"
alt="4" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/pictures/luminous/th6.png"
alt="5" height="160" width="160"></li>
         <li><img src="/photo_site/thumbs/holga.png" alt="6"
height="160" width="160"></li>
     </ul>
</div>


Obviously there is more, but its all the same pattern.

I also understand that jcarousel lite doesnt react well to css's
display: none; and that I should use javascript's .hide (); instead. I
wasnt really sure how to employ this code into the html though.

I appreciate any help in the matter