In Tutoriais

Galeria de Imagens com Miniaturas


Olá! Hoje trouxe um tutorial simples, para mostrar uma galeria com miniaturas de imagens e efeito ao clicar; ela serve para mostrar apenas imagens mesmo, sem links ou descrições (a não ser que faça uma imagem com texto descrevendo-a); os créditos vão para o site The Code Player. Veja como fica:







Para usar, basta colar em um gadget HTML/JavaScript o código abaixo:
 <style>
.gallery{/*area geral*/
max-width: 640px;/*esse valor tem que ser igual a largura das imagens*/
position: relative;
margin: 100px auto;
border: 2px dashed #f9b;
box-shadow: 5px 4px 3px #ccc;
border-radius: 40px 0 40px 0;
padding-top: 440px;
}
.gallery>img{/*imagem em destaque*/
position: absolute;
left: 0;
top: 0;
transition: all 0.5s;
border-radius: 40px 0 40px 0;
height: 100%;
width: 100%;
}
.gallery input[name='slide_switch'] {
display: none;
}
.gallery label {/*miniaturas*/
margin: 18px 0 0 18px;
border: 2px dashed #ff99bb;
float: left;
cursor: pointer;
transition: all 0.5s;
opacity: 0.7;
border-radius: 0 40px 0 40px;
}
.gallery label img{
display: block;
border-radius: 0 40px 0 40px;
}
.gallery input[name='slide_switch']:checked+label {/*miniatura selecionada*/
border-color: #fccccc;
opacity: 1;
}
.gallery input[name='slide_switch'] ~ img {
opacity: 0;
transform: scale(1.1);
}
.gallery input[name='slide_switch']:checked+label+img {
opacity: 1;
transform: scale(1);
}
</style>
<div class="gallery">
 <input type="radio" name="slide_switch" id="id1"/>
 <label for="id1">
  <img src="URL-DA-IMAGEM-TAMANHO-100PX" width="100"/>
 </label>
 <img src="URL-DA-IMAGEM-TAMANHO-640PX"/>

 <input type="radio" name="slide_switch" id="id2" checked="checked"/>
 <label for="id2">
  <img src="URL-DA-IMAGEM-TAMANHO-100PX" width="100"/>
 </label>
 <img src="URL-DA-IMAGEM-TAMANHO-640PX"/>
 
 <input type="radio" name="slide_switch" id="id3"/>
 <label for="id3">
  <img src="URL-DA-IMAGEM-TAMANHO-100PX" width="100"/>
 </label>
 <img src="URL-DA-IMAGEM-TAMANHO-640PX"/>
 
 <input type="radio" name="slide_switch" id="id4"/>
 <label for="id4">
  <img src="URL-DA-IMAGEM-TAMANHO-100PX" width="100"/>
 </label>
 <img src="URL-DA-IMAGEM-TAMANHO-640PX"/>
</div>
<script src="https://db.tt/5muJ2HDJ" type="text/javascript"></script> 

É recomendável colar acima da área de postagens, por exemplo, ou em uma página. As imagens devem ter a largura especificada por você em max-width; se tiver hospedado a imagem no Google, basta redimensionar mudando o número 1600 que aparece na URL para o valor que preferir.
Em padding-top: 440px, na verdade se define a altura, então altere o valor caso necessário. Se quiser adicionar mais imagens, é só repetir a parte do código:
<input type="radio" name="slide_switch" id="id4"/>
<label for="id4">
...
Trocando o número 4 por 5, 6...E a galeria começa mostrando a segunda imagem mesmo :) Espero que gostem.

Related Articles

4 comentários:

  1. O efeito é bastante legal, ainda mais a transição de uma imagem para a outra, até me distraí trocando de uma para a outra. x3 Se eu usasse, somente tiraria a borda e a sombra, acho que ficaria mais bonitinho. Enfim, efeito fofinho demais e bem fácil de usar.

    ResponderExcluir
  2. sempre que entro aqui o layout ta de outro jeito, e mais fofo que nunca! <333
    já ia pegar esse tutorial e usar de menu de slide, sabe? nunca soube como colocar aqueles que divulgam ora poxa ;3;3 q

    ResponderExcluir
  3. Que galeria legal! Tava precisando de um código desses, vou deixar nos favoritos ^^

    ResponderExcluir
  4. Que linnnnnnnnnnnnda, estou in love!
    http://toobege.blogspot.com.br/

    ResponderExcluir

Muito obrigada por seu comentário e por sua presença! Ambos são super importantes para mim.

Apenas peço que:
- Comente a vontade, dê sua opinião, faça críticas, esclareça suas dúvidas e dê suas sugestões sobre o assunto referente às postagens;
- Use um vocabulário livre para todas as idades;
- Não ofenda ninguém em hipótese alguma.

Os comentários são moderados e não são permitidos comentários de pessoas que não se identifiquem. Algumas dúvidas podem ser previamente esclarecidas na F.A.Q, assim como créditos e outras coisas.

Por favor, entrem em contato por meio das redes sociais também para dúvidas, sugestões, pedidos ou outros:
Facebook - Twitter - Google+ - Deviantart