Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andrew Marques

"Galeria" simples com javascript

Por , em Javascript

Recommended Posts

Andrew Marques    47

Andrew Marques
Postado

Olá pessoal, tenho a seguinte "galeria" de imagens...

 

38667642048071402620.jpg

 

Gostaria de que quando clicasse em uma das miniaturas, apenas, trocasse a foto grande...

Se possível com efeito Fade...

 

Grato desde já!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bru_ce    53

Bru_ce
Postado

Já pesquisou à respeito amigo ?

 

Segue alguns exemplos:

 

:seta: http://speckyboy.com/2010/11/14/20-jquery-image-and-multimedia-gallery-plugins/

:seta: http://www.tn3gallery.com/

:seta: http://galleria.io/

:seta: http://www.1stwebdesigner.com/css/fresh-jquery-image-gallery-display-solutions/

:seta: http://www.twospy.com/galleriffic/index.html

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrew Marques    47

Andrew Marques
Postado

Obrigado pelas respostas, mas eu não gostaria de utilizar plugins...

 

Gostaria apenas que trocasse o src da imagem grande para o src da imagem pequena clicada...

 

Tentei assim, mas não funfo, alguém pode me dizer onde estou errando?

 

<html>
<head>
<script>
$(".pequena").on("click", function(e){
 e.preventDefault();
 $(".grande").prop("src", $(this).prop("src"));
});
</script>
</head>
<body>

<img src="img/produto01.jpg" alt="" class="grande" />

<a href="#"><img src="img/produto02.jpg" alt="" class="pequena" width="150" /></a>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo:

 

http://wbruno.com.br/javascript-puro/album-de-fotos-javascript-simples-aplicacao-de-esconde-mostra/

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrew Marques    47

Andrew Marques
Postado

William, obrigado pelo exemplo...

 

Porém você usa divs e li's néh...

 

Tem como adaptar esse código apenas para substituir 1 imagem...

 

Clico em uma e troca o src da grande, apenas isso...

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

tem sim cara, bem simples.

 

leia o código e tente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Andrew Marques    47

Andrew Marques
Postado

Consegui assim:

 

<script type="text/javascript">
function altera_imagem(link){
document.getElementById('foto_prod').src = link;
}
</script>
			
<div class="img_produto">
<img src="img/produto01.jpg" alt="" id="foto_prod" />
<ul>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto01.jpg');"><img src="img/produto01.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto02.jpg');"><img src="img/produto02.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto01.jpg');"><img src="img/produto01.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto02.jpg');"><img src="img/produto02.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto01.jpg');"><img src="img/produto01.jpg" alt="" /></a></li>
<li><a href="javascript:void(0)" onclick="altera_imagem('img/produto02.jpg');"><img src="img/produto02.jpg" alt="" /></a></li>
</ul>
</div>

 

Agr tem como esse efeito de troca ser com fade?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

fade é uma transição suave da propriedade opacity.

 

se vc puder usar css3, em vez de trocar o src.

use opacity: 0|1

 

e transition: 2s para fazer a troca suave.

 

Para o fade ficar legal, vc precisa posicionar uma imagem em cima da outra. Isso é possível com position absolute.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bergs    53

Bergs
Postado

fade é uma transição suave da propriedade opacity.

 

se vc puder usar css3, em vez de trocar o src.

use opacity: 0|1

 

e transition: 2s para fazer a troca suave.

 

Para o fade ficar legal, vc precisa posicionar uma imagem em cima da outra. Isso é possível com position absolute.

 

ou um fadeIn do jquery.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito