Efeito para Carregar uma imagem

[GGerminiani 0]

Prezados colegas,

 

Boa tarde!

 

Estou desenvolvendo um site de anúncio em php.

 

Sou inexperiente na área e solicito por favor a ajuda de vcs.

 

A questão é a seguinte:

 

Possuo um "quadrado" de 700x450, o qual redimensiono as fotos para este tamanho e abaixo dele ficam as miniaturas dessas imagens.

 

Por exemplo:

____________________________________

XXXXXX| |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX| XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX |XXXXX

XXXXXX|____________________________________|XXXXX

 

MINIATURA MINIATURA MINIATURA MINIATURA

MINIATURA MINIATURA MINIATURA MINIATURA

 

 

 

Acontece que as fotos são um pouco pesadas, então quando você clica na miniatura, demora um certo tempo até exibir no "quadrado maior".

 

Para quem não conhece parece que o site "trava", ou que a pessoa clicou na miniatura e o site não responde, enfim, pelo tempo que demora (meidano dependendo da internet da pessoa), parece que nada acontece.

 

Gostaria de aplicar o seguinte:

 

Quando a pessoa clica na miniatura, centralizado no "quadrado maior", apareceria um efeito indicando que a foto está carregando. Por exemplo, quando clicamos em algo no windows que fica com a bolinha girando - exemplificação idiota, não?

 

Depois que carregasse, abrisse a foto com um efeito sutil - sei lá, uma transição de transparência ficando opaca.

 

Deu para entender??

 

Obrigado à todos!

 

Boa noite.

[André do Vale 76]

Eu resolvo isso com um gif de "loader" ao fundo do elemento, sem muito trabalho, e sem script por trás. Olha só esse site que gera: http://ajaxload.info/ :thumbsup:

[GGerminiani 0]

André,

 

Boa noite.

 

Primeiramente gostaria de agradecer imensamente sua resposta.

 

Bom, como disse anteriormente que sou inexperiente... então peço por favor que não se irrete hahahah :grin:

 

você diz que não precisa usar script por trás, mas... como faço com o gif?? Desculpe não entendi.

 

Obrigado novamente!

[Alvaro Jr 2]

Poderia usar Jquery tem varios tipos de tutoria na internet

ensinando fazer album em jquery / css / html

só da uma pesquisada !

[GGerminiani 0]

Alvaro,

 

Boa noite.

 

Obrigado por sua resposta também.

 

Então, acontece que pesquisei a respeito e infelizmente o JQuery não atende o que preciso.

 

Porem o que foi introduzido pelo André já está bem dentro do que imaginava... só gostaria de um pouco mais de informações sobre como e o que fazer com o GIF.

 

Obrigado!

 

__________________________________________________________________________________

 

Só complementando:

 

Fiquei com dúvida agora de como fazer para detectar o carregamento da foto...

 

Ou seja, André, você diz que não precisa de código... mas como funciona / qual seria o código para chamar o GIF enquanto a foto carrega e depois trazê-la?

 

Obrigado!

[André do Vale 76]

GGerminiani, vou explicar "por cima", para que você possa aprender, beleza?

 

Seguinte, o GIF você pode adaptar e baixar naquele link que postei na resposta anterior. Pegando esse GIF, você agora voltará a atenção para o seu HTML/CSS.

 

Pelo CSS, alcance o elemento (seja por classe, ID ou hierarquia de tag) que contorna a imagem. Neste elemento defina o background dele como o GIF que você baixou antes e posicione ele mais ou menos ao centro de onde a imagem está. Com isto, quando uma imagem diferente for carregando a pessoa verá o GIF por baixo.

 

Isto claro é uma solução sem JAVASCRIPT, e até mesmo considerada rústica. Agora, se você souber usar JS, ou algum framework JS, tem bastantes plugins prontos na internet que fazem esse trabalho de "preload", como este: http://jqueryfordesigners.com/image-loading/

[Alvaro Jr 2]

Amigo a parte do jquery que você nao encontrou acessa esse link e veja

http://www.shadowbox-js.com/download.html

 

eo Shadowbox

 

marca todas as opção

em . Choose the adapter you'll be using: Jquery

Botar o Linguagem que vai ta ingles para brazil

entao baixa

 

 

Shadowbox ja vem formatado e tuto como usar

e uma dica para jquery