PhotoFlow – Primeiro Release

Igor Escobar on Mar 11th 2008

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:

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>
<script src="protoFlow.js" type="text/javascript"></script>
<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:

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

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

<p id="protoflow">
<img src="imgs/DSCN0940_91360.jpg" /></p>
<img src="imgs/stimme_von_oben_187192.jpg" />
<img src="imgs/Tropfen_1_Kopie_201721.jpg" />
<img src="imgs/farbraum_012_147508.jpg" />
<img src="imgs/IMG_4906_199357.jpg" />
<img src="imgs/Tropfen_1_Kopie_201721.jpg" />
<img src="imgs/Fries_201253.jpg" />
<img src="imgs/Fries_201253.jpg" />
<ul id="protoCaptions" class="protoCaptions">
	<li>Caption 1</li>
	<li>Caption 2</li>
	<li>Caption 3</li>
	<li>Caption 4</li>
	<li>Caption 5</li>
	<li>Caption 6</li>
	<li>Caption 7</li>
	<li>Caption 8</li>
</ul>
</p>

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

Espero ter contribuído!
[]’s

Você pode se interessar por isto:

Qualidade ou Mais Dinheiro? on March 19th, 2008
A Internet esta cada vez mais populosa e a quantidade de sites sobre os mais variados assuntos é também, cada vez maior.

Aumente as chances do seu projeto/site dar certo on August 7th, 2008
O trabalho de concepção e amadurecimento de uma idéia é uma tarefa complicada.

A importância das tags on April 28th, 2008
Quando queremos estudar sobre qualquer assunto, é muito importante pesquisar não só o assunto em si, mais também, grande parte dos assuntos que o cercam, este é um grande diferencial que se levado a sério pode se tornar uma grande característica.

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

Quickly Tips: Desative o Firebug! on March 26th, 2008
.

Filed in Frameworks, Java Script, Prototype, Scriptaculos, Utilidades, Web 2.0 | No responses yet

Trackback URI | Comments RSS

Leave a Reply