Leandro Garcia

Galeria de fotos

Recentemente, precisei fazer uma galeria de fotos, onde se pudesse navegar entre as fotos e entre os thumbnails. Eu havia feito algo muito parecido com isso anteriormente, porém em FLASH. Como não sou um ÁS em Action Script, a maneira como fiz, é muito ruim para atualizar.

Desta vez, pensei, preciso de uma em Javascript. Procurei muito web a fora, porém não encontrei uma que se encaixasse com o que eu precisava, então resolvi desenvolver uma.

Comecei definindo o layout e as funcionalidades que eu queria.

Defini que eu queria uma galeria com thumbnails abaixo da foto principal, deveria haver uma navegação entre as fotos, e nos thumbs, poderia haver mais do que o exibido sem para isso quebrar o layout, deveria haver uma legenda e uma subleganda.

A partir disso, desenvolvi o layout e em seguida o script.

Em seguida, testei nos Browsers

Resultado…

O Código

<div id="pksgal">
	<div id="palco">
		<div id="pict"><!-- --></div>
		<a href="#" onclick="return avancaImage()" class="sail fow"> avançar </a>
		<a href="#" onclick="return retrocedeImage()" class="sail back"> voltar </a>
	</div>
	<div id="title">
		<div id="titulo"><!-- --></div>
		<div id="deta"><!-- --></div>
	</div>
	<div class="nav mr5"> <a href="#" onclick="retrocedeThumb()"> <img src="images/voltar.gif" alt="voltar" /> </a> </div>
	<div id="thumbs">
		<div id="thumbgall">
			<a href="images/1.jpg" onclick="return abrefoto(this)" title="Stewie|Family Guy"> <img src="images/1.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/2.jpg" onclick="return abrefoto(this)" title="American DAD|10x20"> <img src="images/2.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/3.jpg" onclick="return abrefoto(this)" title="American DAD 2"> <img src="images/3.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/4.png" onclick="return abrefoto(this)" title="Bart|The Simpsons"> <img src="images/4.png" width="50" height="50" alt="" /> </a>
			<a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/6.jpg" onclick="return abrefoto(this)" title="Fry|Futurama"> <img src="images/6.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/8.jpg" onclick="return abrefoto(this)" title="Homer|The Simpsons"> <img src="images/8.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/9.jpg" onclick="return abrefoto(this)" title="Marge | The Simpsons"> <img src="images/9.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/5.jpg" onclick="return abrefoto(this)" title="Peter|Family Guy"> <img src="images/5.jpg" width="50" height="50" alt="" /> </a>
			<a href="images/7.jpg" onclick="return abrefoto(this)" title="Leela|Futurama"> <img src="images/7.jpg" width="50" height="50" alt="" /> </a>
		</div>
	</div>
	<div class="nav ml5"> <a href="#" onclick="avancaThumb()"> <img src="images/avancar.gif" alt="avançar" /> </a> </div>
</div>
<script type="text/javascript">selecionaP();</script>

Como usar

Baixe o arquivo, copie todo o conteúdo entre o Body cole onde você quer que a galeria fique. Para alterar os thumbs, altere o código <img src=“images/1.jpg” width=”50″ height=”50″ alt=”" />, colocando o caminho da sua imagem, coloque quantas você quiser ou precisar.

Para alterar a imagem de destino, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg“>, esse é o caminhop onde a imagem está.

Para alterar a legenda, altere o <a title=”Stewie|Family Guy” onclick=”return abrefoto(this)” href=“images/1.jpg”>, onde o que vem antes de | é a legenda e o que vem depois é a Sublegenda

Vejam funcionando.

http://gallery.leandrogarcia.com/

E… Aproveitem.

Release V 0.1 02/03/2009

• 9 comentários
• Comentar
• Permalink
• Compartilhe