Javascript, Galeria de Fotos (Script.aculo.us)

Prototype

Como alguns já perceberam, eu tenho uma certa paixão por Javascript, e por essa razão to sempre fuçando.

Desta vez descolei uma galeria de fotos feita utilizando prototype + scrip.taculo.us com direito a legenda na foto, legenda externa com div e ZOOM que é o grande diferencial (0 zoom é muito loko).

A galeria de fotos foi criada por Thomas

Requisitos Básicos

Script.aculo.us : http://script.aculo.us/downloads

(Prototype vem incluso)

Preview da Galeria

Galeria de Fotos Javascript

Novamente fui eu quem tratei a imagem, então ta ruim mesmo.

Demonstração

Você encontra a demo no site : http://script.aculo.us/thomas/

Como usa essa doidera ?

Basta baixar o arquivo javascript do thomas application.js

http://script.aculo.us/thomas/application.js

E o arquivo de CSS para os belos efeitos podendo ser encontrado em:

http://script.aculo.us/thomas/scriptaculous.css

Logo em seguida importar em sua páginas junto ao prototype.js e effects.js do script.aculo.us, exemplificando:

<script src="prototype.js"></script>
<script
src="effects.js"></script>
<script
src="application.js"></script>

Substitua “…”por type="text/javascript"

Nota: Importe os arquivos ao final do HTML como se fizesse o papel do onload.

Testado no FF e no IE6 (não sei no IE7, mais provavelmente funciona)

Tá, tá, e agora ele faz tudo sozinho ? Quase tudo, basta agora seguir a definição:

1 – Cada imagem deverá estar dentro de uma div com a classe “photo”
2 – O id da imagem irá representar a legenda
3 – A legenda externa (div amarela) basta inserir uma outra div dentro da já mencionada cima com o classe “text”

Por hora é só isso, ainda estou escrevendo 3 artigos relacionados a Java, qualquer dúvida estamos ai.


7 Comentários on “Javascript, Galeria de Fotos (Script.aculo.us)”

  1. Marcus Sá disse:

    Cara, excelente post, estava precisando exatamente disso!
    Obrigado!

  2. Cyber disse:

    o exemplo deixado não funciona…

  3. Marcio disse:

    Consegui fazer funcionar, mas qdo coloca mais de 5 fotos a foto vai pra um lado e o box vai pro outro, alguem sabe como arrumar isso ? Acrescentar varias fotos sem problemas ????

  4. william disse:

    nao consegui usar , alguem poide me ajudar ?
    william.americo@hotmail.com

  5. Diego disse:

    Olá amigo, eu entrei nos links baixei todos os arquivos .js e Css citados acima, peguei o seu codigo da pagina demo pra testar.. mas mesmo assim nao esta funcionando poderia me ajudar? obrigado

  6. victor borges disse:

    Fera, ótimas postagens, principalmente a do corte de imagem com o javascript, to trabalanho em cima e é ótima *-*. Mas preciso de uma mãzinha nessa…
    poderia postar os arquivos zips? não estou conseguindo entrar na pagina q vc colocou ali em baixo!
    desde já agradeço!

  7. Excellent site. Plenty of useful info here. I’m sending it to several pals ans additionally sharing in delicious. And obviously, thank you for your effort!


Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s