Simples assim
Galeria com jQuery e Ajax
Hoje vou mostrar como é simples fazer um galeria de imagens com jquery e ajax.
Com a jquery vamos fazer os efeitos para as imagens e com o Ajax vamos fazer o carregamento das imagens.
Vamos la, primeiro vc precisa do plugin da jquery.
Agora vamos criar a função para mostrar as imagens
$("#boxImages").find("a").click(function(){
var loader = $(".loading");
var newImage = $(this).attr('href');
var bigImage = $('#fullImage img').not(".loading");
$.ajax({
type:"GET",
url: $(this).attr('href'),
success:function(data){
},
complete: function(){
loader.hide();
},
beforeSend: function(){
loader.show();
bigImage.attr('src', newImage);
}
});
return false;
});
});
Precisaremos de uma imagem de “loading” para mostrar que a imagem esta sendo carregada
http://flaviomuniz.com/_img/loading.gif.
Vamos a estrutura do html
<script type="text/javascript" src="http://flaviomuniz.com/_js/default.js"></script>
<script type="text/javascript">
$ (document).ready(function(){
$(".loading").hide();
});
</script>
O plugin default.js é onde se executa todas as funções para mostrar as imagens.
<img src="http://flaviomuniz.com/_img/loading.gif" class="loading" alt="Loading" title="Loading" width="52" height="21" />
<img src="" />
</div>
<ul id="boxImages">
<li><a href="linux1Big.jpg"><img src="linux.jpg" style="width:64px;"/></a></li>
<li><a href="FirefoxLogo-main_Full.jpg"><img src="icon_firefox.gif" style="width:64px;"/></a></li>
<ul>
Na div “fullImage” é onde a imagem grande irá aparecer.
Na ul boxImages, são as imagens em thumbnail com o link apontando para a imagem ja ampliada.
Com a estrura feita em ul li, fica facil você implementar o jcarousel para listar as imagens, ou algum outro plugin que você achar melhor.
Veja o resultado final
Demo
| Print article | This entry was posted by flaviomuniz on 18/06/2009 at 12:06, and is filed under Ajax, Html, jQuery. Follow any responses to this post through RSS 2.0. You can leave a response or trackback from your own site. |

about 1 year ago
Muito bom o post, e com grande utilidade.
Estava precisando fazer algo assim para um cliente, agora já sei como fazer.
Parabéns…
about 1 year ago
Ae, eu conheço isso – ahushaushu
Mano parabêns, tando o site quanto o post estão otimos!
até segunda!
about 3 months ago
Muito bom.
Teria como neste exemplo passar uma legenda pra foto principal ?
about 3 months ago
Bruno,
você pode criar um title para o e no js vc pega o value do title da mesma forma que fez com a imagem e adiciona o valor dentro de alguma tag, olha o exemplo que eu fiz.
Qlqr dúvida só chamar.
Abraço.
about 2 months ago
Flavio,
parabéns. o post me ajudou muito, adicionei jcarousel em um álbum cujas imagens são buscadas pelo php.