Igor Escobar // Blog

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