Função aplicado em jcarousel

[samukinha 0]

Seguinte galera, estou desenvolvento um site e estou usando o jcarousel. A minha dúvida é quanto ao carregamento dos link desse carousel.

O que eu quero fazer é mais ou menos assim, tenho as imagens no jcarousel com os links e quando clicado nesses link quero que a descrição apareça logo abaixo do jcarousel, sem alterar nada na página. O problema é que estou trabalhando com um menu e ai vem a dor de cabeça:

 

O código que desenvolvi ficou assim:

 

<div id="menu-cardapio">
<span id="topo-menu-cardapio"></span>

<ul id="menu-nav">
<li id="mn-p-tradicionais"><a href="#">PIZZAS TRADICIONAIS</a></li>
<li id="mn-p-doces"><a href="#">PIZZAS DOCES</a></li>
<li id="mn-acrescimos"><a href="#">ACRÉSCIMOS</a></li>
<li id="mn-bebidas"><a href="#">BEBIDAS</a></li>
</ul>

<div id="wrap_carousel">
<img src="imagens/assets/left_arrow.jpg" alt="" id="prev" />
<div id="carousel">
<ul>
<li><a href="index.php?pagina=produtos/produto1"><img src="imagens/pizzas/pizza01.gif" border="0" alt="QUATRO QUEIJOS" />
<div class="nome-produto">QUATRO QUEIJOS</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza02.gif" border="0" alt="MUSSARELA" />
<div class="nome-produto">MUSSARELA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza03.gif" border="0" alt="FRANGO" />
<div class="nome-produto">FRANGO</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza04.gif" border="0" alt="PRESUNTO" />
<div class="nome-produto">PRESUNTO</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza05.gif" border="0"alt="CALABRESA" />
<div class="nome-produto">CALABRESA</div></a></li>
</ul>
<ul>
<li><a href="#"><img src="imagens/pizzas/pizza06.gif" border="0" alt="CALABRESA À <br />PAULISTA" />
<div class="nome-produto">CALABRESA À <br />PAULISTA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza07.gif" border="0" alt="BACON" />
<div class="nome-produto">BACON</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza08.gif" border="0" alt="PORTUGUESA" />
<div class="nome-produto">PORTUGUESA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza09.gif" border="0" alt="FRANGO COM<br />CATUPIRY" />
<div class="nome-produto">FRANGO COM<br />CATUPIRY</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza10.gif" border="0" alt="CATUPIRY" />
<div class="nome-produto">CATUPIRY</div></a></li>
</ul>
<ul>
<li><a href="#"><img src="imagens/pizzas/pizza11.gif" border="0" alt="QUALQUER UMA" />
<div class="nome-produto">QUALQUER UMA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza12.gif" border="0" alt="A NOSSA MODA" />
<div class="nome-produto">A NOSSA MODA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza13.gif" border="0" alt="LOMBO<br /> CANADENSE" />
<div class="nome-produto">LOMBO<br /> CANADENSE</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="DA MAMA" />
<div class="nome-produto">DA MAMA</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza15.gif" border="0" alt="TANTO FAZ" />
<div class="nome-produto">TANTO FAZ</div></a></li>
</ul>
<ul>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="BACALHAU" />
<div class="nome-produto">BACALHAU</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="ATUM" />
<div class="nome-produto">ATUM</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="ALICHE" />
<div class="nome-produto">ALICHE</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza19.gif" border="0" alt="CAMARÃO" />
<div class="nome-produto">CAMARÃO</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="CAMARÃO COM<br />CATUPIRY" />
<div class="nome-produto">CAMARÃO COM<br />CATUPIRY</div></a></li>
</ul>
<ul>
<li><a href="#"><img src="imagens/pizzas/pizza21.gif" border="0" alt="PALMITO" />
<div class="nome-produto">PALMITO</div></a></li>
<li><a href="#"><img src="imagens/pizzas/pizza22.gif" border="0" alt="MARGUERITA" />
<div class="nome-produto">MARGUERITA</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="VEGETARIANA" />
<div class="nome-produto">VEGETARIANA</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="TOAMATE SECO" />
<div class="nome-produto">TOAMATE SECO</div></a></li>
<li><a href="#"><img src="imagens/assets/falta-imagem.gif" border="0" alt="CHAMPIGNON" />
<div class="nome-produto">CHAMPIGNON</div></a></li>
</ul>
</div>
<img src="imagens/assets/right_arrow.jpg" alt="" id="next" />
</div>

<div id="mostra-item-aberto"></div>
</div>

 

 

Quando funcionando, os links devem abrir dentro da div "mostra-item-aberto". Ai fica minha dúvida, este é o carousel apenas do primeiro link do menu o PIZZAS TRADICIONAIS, como faço pra carregar o carousel dos outros links. Faço na mesma página, crio outro arquivo externo e altero somento os elemos da li ou tem alguma função php ou javascript que faça isso? Estou precisando mt disso, se alguém ai do forúm souber pode ame ajudar?

[Ted k' 126]

Carregue algo externo mais em AJAX, assim fica bem mais dinâmica essa funcionalidade, já que está usando um script jQuery, usa o $.get() para passar as informações