ImageCloud: Nuvem De Imagens Simples Com jQuery

Olá! É a primeira vez que visitas o nosso blog? Subscreve o nosso RSS Feed para receberes notificações de novos artigos. Ou segue-nos no Twitter.

ImageCloud Nuvem de Imagens simples com jQuery: exemplo

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 (caso queira um zip com alguns exemplos, também é possível, apesar de o site oficial 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.

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!

Be Sociable, Share!