Pinceladas da Web

Criar galerias de imagens provavelmente é o que os desenvolvedores mais fazem no dia-a-dia, e pra facilitar isso, vou deixar aqui um exemplo de um código paraa criar uma galeria de imagens com a utilização de Ajax.

O HTML é extremamente simples, crio um elemento para englobar a imagem maior, e os thumbnails são links para as imagens maiores:

<div id="container">
    <div id="placeholder">
    	<img id="current" src="imgs/img1.jpg" alt="Galeria de Imagens com Ajax" title="Galeria de Imagens com Ajax" />
    </div>
    <ul>
    	<li><a class="active" href="imgs/img1.jpg" title="Galeria de Imagens com Ajax" rel="alternate"><img src="imgs/thumb-img1.jpg" alt="Galeria de Imagens com Ajax" title="Galeria de Imagens com Ajax" /></a></li>
        <li><a href="imgs/img2.jpg" title="Galeria de Imagens com Ajax" rel="alternate"><img src="imgs/thumb-img2.jpg" alt="Galeria de Imagens com Ajax" title="Galeria de Imagens com Ajax" /></a></li>
        <li><a href="imgs/img3.jpg" title="Galeria de Imagens com Ajax" rel="alternate"><img src="imgs/thumb-img3.jpg" alt="Galeria de Imagens com Ajax" title="Galeria de Imagens com Ajax" /></a></li>
        ...
    </ul>
</div>

E depois o resto fica por conta do JavaScript:

        //Flag criada para evitar que 2 imagens sejam abertas ao mesmo tempo
        var working = false;

	$('li a').click(function(e){
		e.preventDefault();
		if($(this).hasClass('active')) return;

		if(working){
	    	    return false;
	        }

		working = true;

		var imgUrl = $(this).attr('href'),
		img = new Image();

		$('li a').removeClass('active');
		$(this).addClass('active');

		$("#current").remove();
		$('#placeholder').addClass('loading');

		$(img).load(function(){
			$(this).css({display: 'none'});
			$('#placeholder').removeClass('loading').append(img);
			$(img).fadeIn();
			working = false;
		}).attr('src',imgUrl).attr('id','current');
	});

• Ver exemplo
• Download