load content

[mags]

boas

tenho aqui um exemplo da themetrust daquilo que pretendo. clicar numa imagem e ele abre o conteúdo em cima.
http://themetrust.com/demos/reveal/#index

alguém me sabe dizer onde posso arranjar a info para poder fazer isto?
já estive a ver o themetrust, mas se souberem de algo mais simples...

 

[tonebiclas]

1. crias uma div antes da lista
2. ao clicar num item carregas o conteúdo do item por ajax/json e inseres o conteúdo na tal div
3. animas a abertura da div

abraço

 

[mags]

tonebiclas, desde já obrigado pela resposta.
conhece algum tutorial ou exemplo para "totós"?

 

[OldMan]

Não é um tutorial, mas deve ajudar: http://jsfiddle.net/2bjSw/

Basicamente o que fiz foi ao clicar em cada item fui buscar o "id" de onde cliquei.

Passo esse id na chamada de AJAX para saber o que retornar.
Neste caso a chamada de AJAX é fictícia e não retorna nada, por isso precisei de criar eu o HTML para lá meter, numa situação normal ele retorna-te o objecto data e usas a propriedade data.responseText para aceder ao HTML.

Injecto o HTML que recebo da chamada de AJAX num elemento que já estava no HTML (neste caso a <section>) e escondo-a para poder fazer a animação.

 

[mags]

obrigado.
através das vossas ajudas cheguei também ao tipo de exemplo. encontrei este http://perishablepress.com/slide-fade-content/
no entanto agora vou ter de ver como meter neste exemplo o X para fechar

 

[Crow-]

Isso com jQuery é fácil.
Basta atribuires ao 'X' uma ação que faz hide do container que apresenta a imagem grande:
http://api.jquery.com/hide/

Já agora, o scroll no Reveal é feito através deste plugin do jQuery:
http://archive.plugins.jquery.com/project/ScrollTo
http://demos.flesler.com/jquery/scrollTo/

 

[mags]

entretanto o código que arranjei só funciona com jquery 1.4.4
como posso meter compatível com o mais recente?

código

<script type="text/javascript">
$(document).ready(function(){
$('.more').live('click',function(){
var href = $(this).attr('href');
if ($('#ajax').is(':visible')) {
$('#ajax').css('display','block').animate({height:'1px'}).empty();
}
$('#ajax').css('display','block').animate({height:'200px'},function(){
$('#ajax').html('<img class="loader" src="img/loader.gif" alt="">');
$('#ajax').load('content.html #'+href,function(){
$('#ajax').hide().fadeIn().highlightFade({color:'rgb(253,253,175)'});
});
});
return true;
});
});
</script>