Puxando conteúdo externo pela Jquery UI Tabs

[wellysonfr]

Estou fazendo um site de arquitetura e decoração. Na seção portfólio fiz uma galeria de fotos pra cada categoria: Ambientação, Apartamentos, Casas Urbanas e etc...

Essas categorias estão dividas com o Jquery UI Tabs.

Vocês podem ver pelo link:

http://www.duok.com.br/index.php?duok=nav/portfolio

Estou usando a configuração básica do Jquery UI Tabs.

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Ambientação</a></li>
    <li><a href="#tabs-2">Apartamentos</a></li>
    <li><a href="#tabs-3">Casas Urbanas</a></li>
    <li><a href="#tabs-4">Lojas</a></li>
    <li><a href="#tabs-5">Mostras</a></li>
    <li><a href="#tabs-6">Antes e Depois</a></li>
  </ul>
  <div id="tabs-1">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-2">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-3">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-4">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-5">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
    
  <div id="tabs-6">
    <ul class="gallery">
        Conteúdo
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
</div><!--tabs-->

Ativando as tabs usando esse java script:

<script type="text/javascript">
$(function(){
    
    // Abas    
    $('#tabs').tabs();
    $('a').click(function() {
        $(this).blur();
    });        
                
});
</script>

O meu problema é o seguinte: Como vocês podem ver ele carrega todo o conteúdo das seis galerias na mesma página. Eu quero que somente a primeira aba seja carregada (ambientação), o resto seja carregado somente quando eu clicar nelas, entenderam? Eu procurei uma solução na internet mais ou menos assim:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Ambientação</a></li>
    <li><a href="portfolio/conteudo1.html">Apartamentos</a></li>
    <li><a href="portfolio/conteudo2.html">Casas Urbanas</a></li>
    <li><a href="portfolio/conteudo3.html">Lojas</a></li>
    <li><a href="portfolio/conteudo4.html">Mostras</a></li>
    <li><a href="portfolio/conteudo5.html">Antes e Depois</a></li>
  </ul>
  <div id="tabs-1">
    <ul class="gallery">
        Contéudo Ambientação
    </ul>
    <div class="clear"></div>
  </div><!--tabs-1-->
</div><!--tabs-->

Como vocês podem ver, somente a primeira aba é carregada automaticamente. O conteúdo das outras abas estão separadas, evitando que todas carreguem de uma vez.

Pelo que eu li por aí o procedimento correto pra resolver esse problema seria o Ajax! A maioria dos fóruns que eu li a respeito estão em inglês e não entendi quase nada :lol:

Me ajudem a resolver esse problema. Desde já eu agradeço!!!!!!