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

1. Os candidatos: Oscar Maroni (Dono da Boate Bahamas)
2. Bulllet, bullets, onde conseguirei bullets para meu site?
3. Top Craques. Agora também no Myspace.
4. Portal iG lança seu primeiro Aplicativo Open Social
5. CSS Sprites, a arte de posicionar imagens