Uou! Dei uma sumida mas já estou de volta. Agora estudando e ralando, então sobra pouco tempo para blogar. Mas vou tentar não sumir por muito tempo.
Já faz algum tempo que eu queria escrever esse post para mostrar que as HB’s aprendendo Javascript não foram tão inúteis, eu vou mostrar como criar uma simples galeria de imagens com JavaScript. Vale lembrar que eu ainda estou aprendendo, então a coisa vai ser bem básica mesmo.
As imagens
Pegue 4 imagens, de preferência do mesmo tamanho e dê os nomes de 1.jpg, 2.jpg, 3.jpg, e 4.jpg. É importante que as imagens estejam na mesma pasta que você vai salvar a sua página HTML.
O HTML
Primeiro precisamos do código HTML que ficaria assim:
<html>
<head>
</head>
<body>
<h1>Galeria de Imagens</h1>
<p>Use os botões ou clique nas fotos para ampliar.</p>
<input type="button" value="Anterior" onClick="anterior()" />
<input type="button" value="Próxima" onClick="proximo()" /><br /><br />
<img src="1.jpg" id="imgg"/><br /><br />
</body>
</html>
É importante observar que os botões tem uma propriedade “onclick”, que executa uma função Javascript quando é clicado.
E o JavaScript
Essa é a parte da mágica.
<script language="JavaScript">
img =1
function proximo(){
if (img<4){
img++
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
function anterior(){
if (img!=1){
img––
i =img+".jpg"
document.getElementById("imgg").src=""+i+""
}
}
</script>
Aqui eu criei uma variável chamada img e a iniciei com o valor 1. Depois criei duas funções: uma para avançar “proximo()” e outra para voltar “anterior()”. As funções são chamadas quando clicamos no botões. O Javascript deve ser colocado dentro das tags <head>.
Juntamos tudo e pronto. Como eu tinha dito, essa galeria é bem simples, mas é uma boa forma de mostrar o que se pode fazer com alguns conceitos básicos.
Se tiver alguma dúvida ou se você quiser dar alguma sugestão, comente aí.
PS.: É melhor digitar o código do que copiar pois o WordPress converte as aspas em apóstrofos.
Comments(1) 
