Galeria de fotos MooFlow

30 de janeiro de 2010

Quando desenvolvemos algum site que necessite de uma galeria de fotos legal, que seja daquelas que impressionam o usuário, sempre acabamos escolhendo alguma coisa feita em flash, pelos óbvios motivos de recursos visuais que o mesmo nos proporciona na hora de criarmos. Porém caso você necessite criar um site com o máximo de compatibilidade com os navegadores do usuário, este recurso não é a melhor opção.

Alguns podem ter virado a cara pela minha opinião, mas sabemos que se você realmente quiser garantir a total visualização do seu site para o usuário, principalmente aquele que não entende o porquê existe um quadrado branco com um f no meio do site, você deve reduzir ao máximo os recursos de programação que exijam alguma instalação extra para o navegador do usuário.

Portanto graças a programadores conscientes, foi desenvolvida uma galeria de imagens em Java script utilizando a famosa biblioteca “MooTools“, a implementação desta galeria é muito simples e não exige quase nada de conhecimento da biblioteca ou muito menos de Java script.

Vamos ao que interessa, para começarmos a programar devemos fazer o download da galeria e do framework “MooTools”. Neste link você pode baixar a galeria: http://www.outcut.de/MooFlow/Download.html , e neste outro podemos fazer o download do Mootools: http://mootools.net/download
Vamos criar a nossa página em HTML com as imagens dentro de uma div MooFlow:

<HTML>
<head>
        <title>Galeria mootools</title>
</head>
<body>
	<div id="MooFlow">
		<a href=”imagens/big/image1.jpeg”><img src=”imagens/image1.jpeg”></a>
<a href=”imagens/big/image2.jpeg”><img src=”imagens/image2.jpeg”></a>
<a href=”imagens/big/image3.jpeg”><img src=”imagens/image3.jpeg”></a>
<a href=”imagens/big/image4.jpeg”><img src=”imagens/image4.jpeg”></a>
	</div>
</body>
</html>

Com nossa página criada vamos colocar os códigos da galeria entre as tags <head>:

<link rel="stylesheet" type="text/css" href="MooFlow.css" />
<script type="text/javascript" src="js/mootools-1.2-core.js"></script>
<script type="text/javascript" src="js/mootools-1.2-more.js"></script>
<script type="text/javascript" src="MooFlow.js"></script>
<script type="text/javascript">
/* <![CDATA[ */
	var myMooFlowPage = {
		start: function(){
			var mf = new MooFlow($('MooFlow'), {
				startIndex: 5,
				useSlider: true,
				useAutoPlay: true,
				useCaption: true,
				useResize: true,
				useMouseWheel: true,
				useKeyInput: true
			});
		}
	};
	window.addEvent('domready', myMooFlowPage.start);
/* ]]> */
</script>

Pronto isto é o suficiente para nossa galeria funcionar, lembre-se de colocar os arquivos da galeria na pasta correta e prestem atenção na hora de colocar os arquivos das imagens. Em breve atualizarei este artigo para colocar o link para a demonstração desta galeria. Quaisquer dúvidas postem ai embaixo nos comentários que terei o maior prazer em ajudá-los.