em
ajax-image-gallery

Ajax Image Gallery

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">Galeria de Imagens com Ajax</a></li>
        <li><a href="imgs/img2.jpg" title="Galeria de Imagens com Ajax" rel="alternate">Galeria de Imagens com Ajax
        <li><a href="imgs/img3.jpg" title="Galeria de Imagens com Ajax" rel="alternate">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’);
	});

Comentários

  1. Muito legal o seu exemplo de galeria.
    Só um ajuste: Não está sendo utilizado AJAX em nenhum momento nesta galeria…

    Ao contrário do que muitos pensam a função “.load()” nas imagens não faz uma requisição AJAX. Ela simplesmente adiciona um handler que é executado quando a imagem termina de carregar.

    Nessa galeria apenas temos a impressão de que está usando AJAX, porém o que temos é apenas um pré-loader sendo escondido quando a imagem termina de carregar.

    Ainda não é possível carregar uma imagem usando AJAX!

    por Vitor — Responder
    1. +1

      por Tárcio Zemel Responder
    2. Não cheguei a fazer testes, mas será que com AJAX não tem como pegar imagens convertidas pra base64?

      por Tárcio Zemel Responder
  2. Muito show!

    por Lucas Barbosa Lacerda Responder
  3. Muito bonita esta galeria! Estava precisando mesmo de inspiração para meu modelo de galeria para o blog, e este post foi de grande vália que sem querer acabei encontrando acessando o link de outro blog que você escreve também (CSS no Lanche)!
    Um abraço!

    por Eduardo Oliveira Responder
  4. Muito simples de fazer. Gostei das possibilidades, dei uma extendida no código para suporte a múltiplas galerias. valeuu

    por Adriano Responder
  5. Isso me deu a inspiração que eu estava procurando, uma galeria light para que eu possa modelar com o css para ficar do tamanho que eu quero.

    por Edson de Gois — Responder
  6. Como posso aplicar esta galeria em um site?? Estou tentando mas não estou conseguindo :s, por favor alguém pode me dar uma dica? Gostaria de colocar a imagem maior acima dos thumbs que carregam os links e thumbs de uma consulta sql. Fico agradecido e ótimo post, parabéns.

    por Edson de Gois — Responder
  7. Muito foda, parabéns!

    por Marcelo silva Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>