Galeria de imagens com efeito de transição com jQuery - Artigo WebMobile Magazine 33

Nesse artigo vamos descrever como criar sua própria Galeria de Imagens. Para isso, iremos abordar técnicas de JavaScript usando o framework jQuery. Iremos utilizar seus efeitos visuais, animações e manipulação de nosso HTML.

Do que se trata o artigo:

Nesse artigo vamos descrever como criar sua própria Galeria de Imagens. Para isso, iremos abordar técnicas de JavaScript usando o framework jQuery. Iremos utilizar seus efeitos visuais, animações e manipulação de nosso HTML.

Para que serve:

Galeria de imagens são utilizadas quando você tem produtos ou imagens de algum fato ou notícia relevante em seu site.

Em que situação o tema é útil:

Uma Galeria de Imagens é útil para exibir fotos de uma amostra, produtos que desejamos dar destaque em uma loja virtual, notícias de portal ou qualquer imagem que você queria dar ênfase em seu site.

Um recurso muito utilizado por grandes portais da internet para exibir pedaços de portfólios, produtos que se queira dar destaque e notícias importantes é uma Galeria de Imagens. Estas sempre são utilizadas para destacar algum fato. O Yahoo!, por exemplo, utiliza uma galeria de imagens para destacar suas últimas notícias ou fatos importantes (ver Figura 1), já o Submarino utiliza para destacar seus produtos que estão em promoção (ver Figura 2).

Durante muito tempo esse tipo de Galeria de Imagens era feito com Flash, por causa da facilidade e os efeitos visuais que podem ser elaborados facilmente com ele. Mas pelo fato de que importar um arquivo Flash na página inicial do seu site nem sempre é a melhor solução (pois muitas vezes esses arquivos são pesados), grandes portais começaram a desenvolver suas Galerias de Imagens com JavaScript, pois é mais leve e conseguimos reproduzir os mesmos efeitos do Flash com ele.

Nesse contexto, nesse artigo vamos descrever como criar sua própria Galeria de Imagens. Para isso, vamos utilizar HTML, JavaScript (Nota DevMan 1) com jQuery (Nota DevMan 2) para fazer efeitos visuais e CSS para formatar nossa Galeria de Imagens.

Nota DevMan 1. JavaScript

JavaScript é uma linguagem de programação criada por Brendan Eich para a Netscape em 1995, que a princípio se chamava LiveScript. A Netscape, após o sucesso inicial desta linguagem, recebeu uma colaboração considerável da Sun, a qual permitiu o uso do nome JavaScript para alavancar o Livescript, porém as semelhanças entre a linguagem da Suno Java e o Javascript são quase nulas. A linguagem foi criada para atender, principalmente, às seguintes necessidades: validação de formulários no lado cliente e interação com a página. Atualmente o JavaScript vai muito além de seu propósito inicial; podemos ver aplicações inteiras desenvolvidas com JavaScript." [...] continue lendo...

Artigos relacionados