Existem diversos tipos de sites na internet, isso qualquer leigo em desenvolvimento é capaz de constatar por si só. E cada tipo site deve, teoricamente, primar por sua “marca”, sua característica ou características que o faça diferente dos demais. Por exemplo, um site 100% flash é indicado para ações promocionais e hotsites, site com muitos textos e poucas imagens, em portais de notícias e algun blogs, e assim por diante.
Para os sites que precisa/exigem um apelo emocional e/ou de vendas, trabalhar com imagens é uma das melhores opções existentes. Neste caso, apresentar imagens criativamente pode fazer a diferença entre ganhar ou perder visitas/vendas. Por exemplo, o site pode apresentar imagens de produtos em uma nuvem de imagens, também conhecida como image cloud.
Se é este o caso, conseguir uma cloud image de maneira fácil é a opção a ser seguida. E, para isso, existe o jQuery ImageCloud.
Com o plugin ImageCloud para jQuery, é possível selecionar imagens para compor uma nuvem de imagens que, a cada carregamento da página, aparece de maneira diferente, o que dá um ar de modernidade e sentimento de que o site está sempre se atualizando. Algo positivo, certamente. Através de suas configurações fáceis, montar ImageClouds com jQuery é bastante fácil.
Usando o ImageCloud
Para começar, é preciso fazer o download do jQuery ImageCloud [4] (caso queira um zip com alguns exemplos, também é possível [5], apesar de o site oficial [6] contem bastante coisas). Insira a chamada para o jQuery e para o javascript do plugin (de preferência o arquivo minimizado) no <head> de seus documentos, sempre respeitando a estrutura de diretórios de seus projeto para fazer a(s) referência(s):
<script src="jquery-1.5.min.js" type="text/javascript" language="javascript"></script>
<script src="jquery.imageCloud.mini.js" type="text/javascript" language="javascript"></script>
Então, basta apontar o plugin para o elemento em que o set de imagens está e a mágica acontece:
$('#div').imageCloud();
Opções do ImageCloud
Apesar de o plugin ser poderoso, não são muitas suas opções:
- Width: Número. Especifica a largura da área da nuvem. Default “600px”.
- Height: Número. Especifica a altura da área da nuvem. Default “400px”.
- Color: Hex. Cor da borda que aparece em cada imagem. Default “#800000″ (vermelho escuro).
- Link: true|false. Se “true”, as imagens apontam para o endereço especificado no atributo “title”. Default “false”.
- Speed: Número. Velocidade do efeito (valor baixo, efeito mais rápido). Default “200″.
- BorderSize: Número. Tamanho da borda em cada imagem. Default “6″.
- BorderStyle: Tipo de borda de imagem (valores CSS, como solid, dotted, dashed, etc). Default “solid”.
- BorderRadius: Número. Arredonda a borda das imagens (não funciona em IE). Default “0″.
Nada melhor que um exemplo para ilustrar o uso das opções: veja o exemplo oficial do ImageCloud [7].
Conclusão sobre o ImageCloud
Certamente quando é preciso um apelo visual ou uma apresentação diferenciada de imagens, por si só, utilizar uma nuvem de imagens é uma boa pedida. Através do jQuery ImageCloud isso é passível de ser realizado com mínimo esforço de programação.
Apesar de, para usos na prática, o plugin precisar receber uma estilização mais refinada, definitivamente ele cumpre bem seu papel e, por isso, está aconselhado!