Vamos aprender como se faz uma galeria de imagens, que além de poupar espaço tem um efeito bem interessante.
Esta galeria possui miniaturas, ficando ainda mais legal. Você pode adicionar as imagens que quiser, fazer apresentações, ou apenas mostrar suas fotos para os amigos. Veja como fica:
Bem legal, né? Vamos ao código:
<center><iframe id="galeria" height="363" marginheight="0" src="https://lh6.googleusercontent.com/_H2VxdShzMOw/TXPF_YxJZwI/AAAAAAAABOE/bZL6x6LeFOU/galeriadeimagens.jpg" frameborder="0" width="450" name="galeria" marginwidth="0" scrolling="no"></iframe></center>
<center><br /><a href="Url imagem 1" target="galeria"><img src="Url imagem 1" width="40" height="40" /></a> <a href="
Url imagem 2" target="galeria"><img src="
Url imagem 2" width="40" height="40" /></a> <a href="Url imagem 3" target="galeria"><img src="Url imagem 3" width="40" height="40" /></a> <a href="Url imagem 4" target="galeria"><img src="Url imagem 4" width="40" height="40" /></a> <a href="Url imagem 5" target="galeria"><img src="Url imagem 5" width="40" height="40" /></a> <a href="Url imagem 6" target="galeria"><img src="Url imagem 6" width="40" height="40" /></a> <a href="Url imagem 7" target="galeria"><img src="Url imagem 7" width="40" height="40" /></a> <a href="Url imagem 8" target="galeria"><img src="Url imagem 8" width="40" height="40" /></a> <a href="Url imagem 9" target="galeria"><img src="Url imagem 9" width="40" height="40" /></a> <a href="Url imagem 10" target="galeria"><img src="Url imagem 10" width="40" height="40" /></a> <a href="Url imagem 11" target="galeria"><img src="Url imagem 11" width="40" height="40" /></a> <a href="Url imagem 12" target="galeria"><img src="Url imagem 12" width="40" height="40" /></a></center>
Na primeira parte do código que vai de <center><iframe Até </iframe></center> Está a capa da galeria, ou seja, a primeira imagem. No código já tem uma imagem de 450 por 363 pixels.
Se você quiser alterar esta imagem é só criar uma, e retirar a parte do código que contém a url em vermelho. Substitua pela url da sua imagem. Não esqueça de ajustar height e width as dimensões da sua imagem.
As imagens da segunda parte do código devem ser repetidas 2 vezes como no exemplo em vermelho, Url imagem 1 Url imagem 1 Url imagem 2 Url imagem2 e assim por diante. Não esqueça que todas as imagens deveram ter as mesmas dimensões, e estar hospedadas na web! É só escolher um site de hospedagem gratuito, e pegar as urls.
Você pode adicionar quantas imagens quiser! Basta colocar esta parte do código: <a href="Url imagem" target="galeria"><img src="Url imagem" width="40" height="40" /></a> antes de </center> Ou se desejar, exclua a mesma parte do código para adicionar menos imagens.
0 Comentários