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"/>Trocando o número 4 por 5, 6...E a galeria começa mostrando a segunda imagem mesmo :) Espero que gostem.
<label for="id4">
...
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.
ResponderExcluirsempre que entro aqui o layout ta de outro jeito, e mais fofo que nunca! <333
ResponderExcluirjá ia pegar esse tutorial e usar de menu de slide, sabe? nunca soube como colocar aqueles que divulgam ora poxa ;3;3 q
Que galeria legal! Tava precisando de um código desses, vou deixar nos favoritos ^^
ResponderExcluirQue linnnnnnnnnnnnda, estou in love!
ResponderExcluirhttp://toobege.blogspot.com.br/