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…

Galeria

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. Offset, descobrindo o posicionamento absoluto de um elemento
  2. Os candidatos: Oscar Maroni (Dono da Boate Bahamas)
  3. Bulllet, bullets, onde conseguirei bullets para meu site?
  4. Top Craques. Agora também no Myspace.
  5. Portal iG lança seu primeiro Aplicativo Open Social



13 Comentários »

  1. Comentário por macedo — 02/07/2009 @ 2:31 pm

    Olá, Garcia. Muito obrigado por compartilhar conosco seu trabalho. Eu estava procurando justamente isto pra concluir minha página pessoal.
    Só que estou encontrando um probleminha pra rodar no FF. O que está disponível pra baixar, está dando problema. Mas, o que vc colocou no site, está funcionando.
    Por favor, vc poderia enviar o js que usou corrigindo isto?

    Muito obrigado!

  2. Comentário por Wesley Barbosa — 08/07/2009 @ 6:22 pm

    E ai beleza? bacana a galeria Mais Faltaram as funções
    retrocedeThumb()
    avancaThumb()

    Sabe como fazer???

    Obrigado?

  3. Comentário por Leandro Garcia — 09/07/2009 @ 8:01 am

    Wesley, eu atualizei o arquivo com a galeria. Agora tem o CSS e o JS completos

  4. Comentário por Leandro Garcia — 09/07/2009 @ 8:01 am

    Macedo, eu atualizei o arquivo com a galeria. Agora tem o CSS e o JS completos

  5. Comentário por Michelle — 11/07/2009 @ 5:43 pm

    Oi Leandro! Uma galeria de fotos era justamente o que eu procurava, vou testar essa no site que eu participo. Mas eu queria saber se as fotos, par serem postadas, precisam ser hospedadas ?

  6. Comentário por Leandro Garcia — 14/07/2009 @ 5:48 pm

    Michelle, sim, as imagens precisam estar hospedadas.

  7. Comentário por antonio — 12/03/2010 @ 2:03 pm

    amigo não estou conseguinto colocar essa galeria copio como pede e nao aparece nada.

  8. Comentário por antonio — 12/03/2010 @ 2:04 pm

    como faço pra colocar no meu blog

  9. Comentário por Geydiael — 17/03/2010 @ 11:47 am

    olá amigo, gostei muito mesmo de sua galeria é exatamente o que preciso, mas, esta havendo um problema, o código postado a cima não fica igual a galeria postada como amostra. esta havendo algum erro, eu tentei modifica o código pra ver se daria certo, mas também não deu certo, você poderia me dar mais algumas dicas ou corrigir o código.
    valeu.

  10. Comentário por Juliana Martins — 03/02/2011 @ 12:37 pm

    Boa Tarde … adorei essa galeria! Mas deu erros!
    Coloquei conforme acima na edição de minhas páginas independentes do meu blog, mas ele não fica na estrutura da sua galeria.

    Vc pode me ajudar?

    Obrigada,

  11. Comentário por Rodolfo Gomes — 13/02/2011 @ 10:24 pm

    Amigo gostei da galeria e ja fiz o teste e deu certo, mas preciso que quem está vendo possa copia-las tem como ? por favor mande-me um email respondendo abraço

  12. Comentário por leandro garcia — 20/05/2011 @ 1:56 pm

    nesta versão não, mas é uma sugestão interessante para uma próxima versão

  13. Comentário por leandro garcia — 20/05/2011 @ 1:58 pm

    Você tem algum lugar onde eu possa ver os erros que estão dando?

Rss dos comentários TrackBack URL

Deixe um comentário