post Categoria: Frameworks, Java Script, Prototype, Scriptaculos, Utilidades, web 2.0 — Igor Escobar @ 13:47 — post

Plug-in PhotoFlow
Dia 10 de março foi lançado o primeiro release do PhotoFlow, pela DeenSoft.

O PhotoFlow foi criado utilizando Prototype e Scriptaculos, para que plug-in funcione, as duas bibliotecas são pré-requisitos.

O PhotoFlow, interpreta o seu arquivo xhtml aplica um efeito conhecido como CoverFlow igual a ilustração deste post.

Exemplo de uso

Primeiro coloque o entre as tags head as seguintes chamadas javascript e css:

  1. <script src="prototype.js" type="text/javascript"></script>
  2. <script src="scriptaculous.js" type="text/javascript"></script>
  3. <script src="protoFlow.js" type="text/javascript"></script>
  4. <link href="protoFlow.css" rel="stylesheet" type="text/css" />

Logo após, configure a chamada do plug-in para o elemento que você deseja que o PhotoFlow Inteprete:

  1. <script language="Javascript">
  2. Event.observe(window, 'load', function() {
  3.          cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});         })
  4. </script>

O seu código xhtml deve ficar da seguinte forma:

  1. <p id="protoflow">
  2. <img src="imgs/DSCN0940_91360.jpg" /></p>
  3. <img src="imgs/stimme_von_oben_187192.jpg" />
  4. <img src="imgs/Tropfen_1_Kopie_201721.jpg" />
  5. <img src="imgs/farbraum_012_147508.jpg" />
  6. <img src="imgs/IMG_4906_199357.jpg" />
  7. <img src="imgs/Tropfen_1_Kopie_201721.jpg" />
  8. <img src="imgs/Fries_201253.jpg" />
  9. <img src="imgs/Fries_201253.jpg" />
  10. <ul id="protoCaptions" class="protoCaptions">
  11.     <li>Caption 1</li>
  12.     <li>Caption 2</li>
  13.     <li>Caption 3</li>
  14.     <li>Caption 4</li>
  15.     <li>Caption 5</li>
  16.     <li>Caption 6</li>
  17.     <li>Caption 7</li>
  18.     <li>Caption 8</li>
  19. </ul>
  20. </p>

Para os interessados:
PhotoFlow first preview release
PhotoFlow Demos
Prototype JavaScript Framework
Scriptaculos Prototype Plug-in

Espero ter contribuído!
[]'s

Leia também:

Arquivos CSS até 34% mais leves! on February 18th, 2008
Mais uma ferramenta gratuita que facilita e muito a vida dos desenvolvedores web.

Web Standards vs. Projeto em dia on March 7th, 2008
Principalmente nas micro-empresas este é um dilema muito comum e recorrente na cabeça dos pobres desenvolvedores.

Woopra - Atenção ao Google Analytics on April 4th, 2008
.

Comparação de massividade nas buscas on February 19th, 2008
.

Faça seu site carregar 500% mais rápido com PHP Speedy on February 18th, 2008
A .

Desculpe, nenhum comentário até o momento.

Solte o verbo...

Comment Guidelines: Somente o Basic XHTML é permitido (a href, strong, em, code). Todas as linhas de paragrafos serão geradas automaticamente.

Você tem um nome, certo ? 
Endereço de e-mail (prometo que não vou falar ele pra ninguem rs) 
Se você tiver um site/blog por favor digite-o aqui. 
Aqui é aonde você escreve seu comentário . 
Relembre minhas informações a próxima vez que eu visitar.