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):
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!
One Response
Obrigado agora irei estilizar essas bordas da um visual bem caprichado nelas. Abraço