Utilize slideshows para chamar a atenção de seus visitantes.

Para divulgarmos e promovermos nossos produtos e serviços, temos de lançar mão de várias tecnologias com o intuito inicial de chamar a atenção de um navegante Web e lhe apresentar nossas propostas. Mas para isto, não basta simplesmente disponibilizar um banner ou uma imagem bonita e atrativa, temos que interagir com este navegante lhe passando a idéia de que ele não está apenas em mais um sítio, mas sim em um sítio que é ideal para lhe provê do que precisa.

Vou lhe mostrar neste artigo a apresentação de imagens em slideshow (ou galerias de imagens) que pode ser usado em lojas virtuais (e-commerce) para incrementar promoções, destacar produtos, caracterizar ou descrever funções de produtos… enfim, com esta tecnologia, você terá uma gama maior de ferramentas para apresentar os seus produtos e tentar manter a atenção de seus visitantes. Também o uso de slideshows é ideal para apresentação de portfólios. Qualquer conjunto de imagens que você queira exibir, poderá perfeitamente ser exibido em um tipo de slideshow.

Os exemplos desta página utilizam a biblioteca JQuery, mas há outros tipos de bibliotecas que executam funções semelhantes (como o Mootools).

Para não prolongar muito este artigo vou lhe mostrar primeiro 5 exemplos de utilização de slideshows. No final deste artigo vou lhe indicar onde poderá encontrar programas já prontos assim como tutoriais* para que você possa entender e modificar a apresentação destes slideshows de acordo com a sua necessidade. Todos os exemplos neste artigo tiveram seus códigos modificados para poderem caber (dimensões) nesta página, assim como foram feitas algumas alterações com relação aos seus elementos – desta forma você poderá ver que todos eles podem ser modificados de acordo com sua vontade.

Rotação de Imagens com Descrição

Como você poderá observar abaixo, este efeito possui um menu na parte direita que ao ser acessado, comuta a imagem na área principal e acrescenta uma pequena descrição à respeito da imagem apresentada.

SpaceGallery

Este exemplo foi construído utilizando o SpaceGallery. Este script trata de um conjunto de outros scripts em forma de pacote (estão todos em um arquivo compactado) que você poderá baixar em http://eyecon.ro/spacegallery/. Visite também o sítio principal em http://eyecon.ro/ onde encontrará outros pacotes com efeitos interessantes para incrementar em suas páginas.

Ótimo Efeito Hover com Thumbnails

No exemplo abaixo você tem thumbnails na parte superior que ao se passar o ponteiro do mouse, se destaca para permitir uma melhor visualização do produto (como exemplo). Este thumbnail ao ser clicado, comuta a imagem na área principal.

Slider Gallery

Aqui é apresentado um efeito Slider (de deslizamento) que captura os movimentos do mouse e consegue deslizar as imagens de acordo com o arrastamento do ponteiro do mouse na barra de rolagem. Este efeito eu achei interessante para lojas virtuais, onde se pode colocar promoções neste slideshow e utilizá-lo como header de secções.

Slick Slideshow

Outro efeito interessante para apresentar produtos ou secções de produtos. Como você pode observar abaixo, é permitido colocar uma imagem juntamente com uma descrição, onde estas imagens com suas respectivas descrições podem ser comutadas de acordo com cliques nas setas laterais (anterior e próxima).

Fontes

Como fonte inicial onde poderá encontrar estes efeitos de slideshows, vou listar aqui alguns sítios que os mantêm em forma de pacotes, onde você irá baixar o pacote, descompactá-lo, ler as instruções de uso e implementá-lo em suas páginas (os modificando se desejar).

Carousel – http://billwscott.com/carousel/
jCarousel – http://sorgalla.com/projects/jcarousel/
iCarousel – http://zendold.lojcomm.com.br/icarousel/
JQuery Cycle Plugin – http://www.malsup.com/jquery/cycle/
Slideshow 2 – http://www.electricprism.com/aeron/slideshow/

O Yahoo também mantém uma biblioteca (que é utilizada inclusive no Scribd) e que você poderá conhecê-la em http://developer.yahoo.com/yui/carousel/. O Google também possui códigos semelhantes em sua área Google Code que fica em http://code.google.com/intl/pt-BR/.

Para conhecer outros scripts visite o blog Cats Who Code que escreveu o artigo Top 10 Javascript Slideshows, carousels and slideshows que possui mais alguns modelos. Existem vários outros que você poderá encontrar em pesquisas por mecanismos de busca.

Quanto à tutoriais, tem o artigo 25 Tutoriais e Plugins jQuery para Sliders e Galerias de Imagens, que é um artigo do blog WebGrafismo onde irá conhecer vários outros projetos.

Conclusão

Como você pode observar nos exemplos deste artigo, estes slideshows podem ser implementados em qualquer tipo de páginas Web, não importa se é em uma única página ou em todas as páginas. Observe que principalmente lojas online (e-commerce) fazem uso extensivo deste efeito para cativar a atenção de seus visitantes, assim como para lhes mostrar os vários produtos que os mesmos podem se interessar (promoções, brindes, descontos, lançamentos…).

Enfim, com a posse e domínio desta tecnologia, poderá fazer apresentação de produtos muito mais eficaz do que iria fazer se utilizasse apenas banners ou imagens estáticas. Outro ponto interessante é que dependendo das imagens que colocar, poderá fazer com que suas páginas fiquem muito mais leves (carreguem rápido) do que se utilizasse a tecnologia flashplayer – aqui a página ficou pesada pois são carregados 5 slideshows diferentes com imagens diferentes também, de vários tamanhos.

* os tutoriais estão na língua inglesa, se você conhecer tutoriais na língua portuguesa poderá indicá-los nos comentários – assim mais pessoas serão beneficiadas.