Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Carregando imagens com jQuery usando o .load()

Um dia desses etava precisando carregar imagens grandes a partir do click em imagens pequenas, e tive o problema com o tempo de carregamento dessa troca de imagens, daí o pessoal do meu trabalho me ajudou a desenvolver um script usando jQuery para fazer este carregamento usando o métdo .load(). Veja abaixo como funciona

Primeiro vamos a estrutura de HTML, veja que aqui eu usei classes e outros elementos que você pode trocar conforme sua necessidade.

<div class="img-grande">
    <a href="imagens/001.jpg" class="abre-foto">
        <img src="imagens/001.jpg" />
    </a>
</div>
<div id="thumbImagens">
    <ul>
    	<li><a rel="imagens/001.jpg"><img src="imagens/thumb_001.jpg" /></a></li>
    	<li><a rel="imagens/002.jpg"><img src="imagens/thumb_002.jpg" /></a></li>
    	<li><a rel="imagens/003.jpg"><img src="imagens/thumb_002.jpg" /></a></li>
    </ul>
</div>

Aqui no meu exemplo temos duas imagens as grandes e as pequenas começadas com o nome “thumb_”, o importante é que no link da imagem pequna tenha a referência da imagem grande, por isso no atributo “REL” da imagem eu coloquei o caminho da imagem grande.

Agora vamos as códigos de jQuey, primeiro iniciamos a biblioteca jQuery e do ease (opcional):

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.ease.js"></script>

E agora o código que abre as imagens, veja nos comentários a explicação de cada etapa da execução

<script type="text/javascript">
	//Inicia a biblioteca jQuery
	$(function(){

		//Ao clicar no imagem pequena
		$('#thumbImagens a').click(function(){

			//Guarda o valor do caminha da imagem grande
			var linkAtual = $(this).attr('rel');

			//Procura o link da imagem grande dentro do elemento e muda sua URL
			// Isso aqui é opicional caso deseja que a imagem abra em outra janela ou com
			// algum tipo de ampliação
			$('.img-grande').find('a').attr('href',linkAtual);

			//Procure a imagem grande atual e desapareça com ela
			$('.img-grande').find('img').fadeOut({
				//Tempo de irá durar o desaparecimento da imagem
				duration: 300, 
				//Efeito do ease que vai acontecer em 300 milesegundos
				easing: 'jswing',
				//após acabar o efeito de desaparecer 
				complete: function(){
					//Coloque no atributo IMG o caminho (src) da imagem clicada
					$('.img-grande').find('img').attr('src',linkAtual);
					//Agora faça a leitura do arquivo usando o atributo .load() da imagem
					$('.img-grande').find('img').load(function() {
						//Após acabar a leitura faça a imagem aparecer
						$('.img-grande').find('img').fadeIn(300);
					});
				}
			});
		});
	//Fecha a inicialização da biblioteca jQuery
	});
</script>

Agora vamos dar uma estilizada nos elementos de HTML e colocar um preload na imagem, veja o código de CSS abaixo:

<style type="text/css">
	.img-grande{
		width:445px;
		height:290px;
		overflow:hidden;
		float:left;
		position:relative;
		background:url(imagens/loading.gif) no-repeat center center;
	}
		.img-grande a{}
		.img-grande img{
			width:445px;
		}

	#thumbImagens ul{
		margin:0;
		paddng:0;
		width:445px;
		height:75px;
		list-style:none;
	}
		#thumbImagens li{
			width:110px;
			height:75px;
			float:left;
		}
		#thumbImagens a{ cursor:pointer }
		#thumbImagens img{
			width:100px;
			height:65px;
			margin:5px;
		}
</style>

Veja que coloquei uma imagem de “pre-load” no elemento “.img-grande”, assim quando a imagem desaparecer em “fade” o “pre-load” vai aparecer e ficar por baixo da imagem, se quiser neste link você pode pegar vários tipos de imagens para usar aqui do tamanho que quiser.

Dúvidas ou sugestões postem ai, até mais pessoal




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (10)

  • André Rubio disse:

    Legal, muito bom o código, parabéns pela iniciativa!

  • Tuim disse:

    Cara seu script de Carregando imagens com jQuery usando o .load() parece legal, mas acho que tem um bug. Quando vc clica logo de cara no thumb da imagem que já esta aberta, ela some e nao carrega. Sei que é estranho, mas vc conhece usuario, ele pode clicar nessa ordem e da uma impressao ruim de usabilidade, vc sabe como consertar isso ?

    Obrigado e abcs …

  • Marcos disse:

    Cara, era exatamente isso que eu precisava ! Valeu

  • Lucas disse:

    Ótimo código. Usei ele em um projeto e funcionou bem d+! Obrigado e parabéns pela iniciativa!

  • Adriano Meira disse:

    Olá Tuim, obrigado pela dica mas para solucionar este problema podemos utilizar a fução ajax ao invés da “find”, veja este link http://www.adrianomeira.com/blog/usando-a-funcao-ajax-do-jquery onde falo mais sobre esta função.

    Até mais!

  • Parabéns pelo artigo, muito bom tenho usado o bootstrap, mas podendo fazer na unha é sempre melhor.

  • Cleberson disse:

    Olá Tuim é meio tarde pra responder mas consegui resolver esse problema adicionando o código:

    $(‘.img-grande’).find(‘img’).fadeIn(300);

    abaixo da linha 30.

  • Adriano Meira disse:

    Opa obrigado pela dica Cleberson! 😉

  • robsons disse:

    boa noite adriano meira amigo me ajude se possivel eu quero um script igual esse de imagem,so que quero carregar os videos vou te manda um site que usar ele para vc tem uma ideia pode se amigo (http://megafilmesonline.net/contato-fatal-dublado/) eu queria que meus videos aparecessem assim ,no site onde tem escrito selecione o play desejado para assisti ele troca os videos sem carregar a pagina,agradeço se voce pode me ajuda .

  • Adriano Meira disse:

    Olá Robsons

    Cara para fazer algo similar aconselho fortemente usar este plugin http://www.tikku.com/jquery-youtube-tubeplayer-plugin ele é muito útil ao se trabalhar com o embed do Youtube, dá para substituir o a tribulo “rel” pelo código do vídeo e carregá-lo no lugar onde vai rodar, ou se o vídeo estiver no seu servidor é só trocar o link da imagem pelo link do vídeo, mas vai precisar de alguns plugins de embede para rodar o vídeo automaticamente.

    Até mais!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...