Neste tutorial você vai aprender como criar uma simples galeria de imagens utilizando o HTML. Vamos ao que interessa.
Passo 1
Primeiro de tudo você deve ter instalado um editor HTML, texto ou até mesmo o Dreamweaver. Depois, crie um arquivo com o nome index.html.
Passo 2
Precisamos declarar o código básico de um website. Veja o código:
<html>
<head>
<title>Simples galeria de imagens</title>
</head>
<body>
</body>
</html>
A seguir vamos criar 3 divs, uma para a galleria principal, outra para as miniaturas e a última para a visualização.
Passo 3
Abaixo da tag <body> coloque a abertura <div> para alinhar a galeria e <h3> para o título:
<h3>Simples galeria de imagens</h3><br/>
Agora, criamos outra <div> para as miniaturas com suas imagens e um pequeno código que mostra a imagem ampliada.
<img onmouseover=”preview.src=img1.src” id=”img1″ src=”http://bit.ly/5Y8nSJ” alt=”Imagem não carregada”/>
<img onmouseover=”preview.src=img2.src” id=”img2″ src=”http://bit.ly/79Va1q” alt=”Imagem não carregada”/>
<img onmouseover=”preview.src=img3.src” id=”img3″ src=”http://bit.ly/6xUMOs” alt=”Imagem não carregada”/>
<img onmouseover=”preview.src=img4.src” id=”img4″ src=”http://bit.ly/2LHyDW” alt=”Imagem não carregada”/>
<img onmouseover=”preview.src=img5.src” id=”img5″ src=”http://bit.ly/51JSY3″ alt=”Imagem não carregada”/>
<img onmouseover=”preview.src=img6.src” id=”img6″ src=”http://bit.ly/7URvNR” alt=”Imagem não carregada”/>
</div><br/>
Passo 4
As miniaturas estão prontas para serem mostradas. Crie mais uma <div> para mostrar a imagem grande.
<img id=”preview” src=”http://bit.ly/6xUMOs” alt=” Imagem não carregada “/>
</div></div> <!— fecha a div gallery –>
</body>
</html>
Passo 5
Nossa galeria de imagens está pronta e funcionando muito bem, mais é preciso aplicar alguns efeitos CSS. Então, acima da tag </head> coloque o seguinte código:
body {
background: #222;
margin-top: 20px;
}
h3 {
color: #eee;
font-family: Verdana;
}
.thumbnails img {
height: 80px;
border: 4px solid #555;
padding: 1px;
margin: 0 10px 10px 0;
}
.thumbnails img:hover {
border: 4px solid #00ccff;
cursor:pointer;
}
.preview img {
border: 4px solid #444;
padding: 1px;
height: 500px;
}
</style>
Resultado final
ola gostaria de saber como faço para colocar outras imagens?
Altere o campo a seguir do passo 3:
src=”http://bit.ly/5Y8nSJ”
e no passo 4 você define qual imagem vai ser carregada primeiro:
Grato!
ola gostei muito do modelo dessa galeria.Mas quando alterei as imagens conforme explicado no passo 03 o efeito o onmouseover parou de funcionar,as imagens ficaram fixas.
Boa noite. Aline, o que você deve fazer é alterar somente a propriedade src=”url_da_imagem” da tag “img” no passo 3.
Abraço!
Usei o código, exatamente como vcs colocaram, customizando com as minhas imagens. Só que só carregam a primeira e última foto na “imagem grande”. Tem idéia do que pode estar errado?
Abraços e parabéns pelo tutorial.