Dentre todas as galerias de imagens que temos disponíveis na internet, o mooflow se destaca pela riqueza e beleza de sua apresentação.

Por muito tempo, animações desse tipo eram possíveis apenas usando flash e muito tempo de programação ActionScript. Hoje, depois da estruturação dos frameworks javascripts muitas dessas “firulas” podem ser facilmente implementadas.

O Mooflow é um desses plugins, desenvolvido usando o framework mootools, ele cria uma galeria de imagens no estilo carroussel (ou carousel, se preferir). Irei mostrar aqui como implementar esse lindo recurso:

A primeira coisa que voc? deve ter é o framework mootools, partiremos do principio que você o tem com todos os seus módulos do core e more.

Depois baixe o plugin do mooflow e “chame” ele na sua página, o código deverá está parecido com isso:

<script src="mootools-1.2.4-core-yc.js" type="text/javascript"></script>
<script src="mootools-1.2.4.2-more-yc.js" type="text/javascript"></script>

A estrutura do HTML é bem simples:

<div id="MooFlow">
    <div><img src="image1.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image2.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image3.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image4.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image5.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image6.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image7.jpg" title="Title" alt="descrição" /></div>
    <div><img src="image8.jpg" title="Title" alt="descrição" /></div>
</div>

Falta ainda instanciarmos o plugin do Mooflow, ele que faz toda a mágica:

window.addEvent('domready', function(){
    var mf = new MooFlow($('MooFlow'), {
        startIndex: 5,
        useSlider: true,
        useAutoPlay: true,
        useCaption: true,
        useResize: true,
        useWindowResize: true,
        useMouseWheel: true,
        useKeyInput: true
    });
});

Agora que temos as devidas chamadas de javascript, css e a estrutura do html criada, teoricamente deverá funcionar tudo perfeitamente bem.

“Ops!!! Mamura, deu erro aqui…”

O Mooflow foi criado em cima da versão 1.2.0 do mootools, que foi modificada e aprimorada, como qualquer bom framework. Se você estiver usando qualquer versão superior a essa, teremos que fazer uma pequena correção no Mooflow.

No método reflect, teremos que setar o atributo ‘src’ da imagem, para que funcione tudo corretamente:

reflect: function(arg){
    //i = arg.img.clone();
    var i = arg.img.clone().set('src', arg.img.src);

Dependendo do browser (leia-se IE), a função clone() não consegue pegar alguns atributos de alguns elementos, nesse caso temos que adicionar o atributo src. Fazendo isso tudo deverá ocorrer bem e teremos uma bela galeria de imagens como essa:

siluet
red head
jennifer aniston
como voar
cintia dicker
cerveja
enjoy
espirro