quinta-feira, 23 de outubro de 2014

Fácil e reutilizável galeria de imagens em Jquery

Se você é programador vai achar esse código um tanto quanto é trivial, mas se você for designer, como o cara que me pediu isso, talvez isso seja muito útil pra você.

Direto vemos galerias de imagens e hotsites e afins, e hoje é simplesmente ridículo fazer esse tipo de coisa com flash. Flash aos poucos está sendo banido da Internet. 

HTML5 e um pouco de jQuery é o que você precisa para fazer uma galeria de imagens onde seja possível escolher a imagem com thumbnails, avançar, voltar e ter exibição automática em ciclo. 

Aqui eu corrijo um erro muito comum dessas galerias: se uma nova imagem aparece a cada 5 segundos, e o usuário passou 4 segundos na última imagem, não seria correto trocar a imagem novamente no timeout, um segundo depois. Com a interação do usuário o timer deveria ser resetado. 

Crie uma página HTML com o conteúdo abaixo. Você pode trazer o  jquery de um CDN também.

Repare nos comentários do código. Uso atributos do tipo data-* e algumas funções anônimas.


 
  
  Untitled Document
  


  
  



 

 

  



«     »

Nenhum comentário:

Postar um comentário

Postagens populares

Marcadores

delphi (60) C# (31) poo (21) Lazarus (19) Site aos Pedaços (15) sql (13) Reflexões (10) .Net (9) Humor (9) javascript (9) ASp.Net (8) api (8) Básico (6) Programação (6) ms sql server (5) Web (4) banco de dados (4) HTML (3) PHP (3) Python (3) design patterns (3) jQuery (3) livros (3) metaprogramação (3) Ajax (2) Debug (2) Dicas Básicas Windows (2) Pascal (2) games (2) linguagem (2) música (2) singleton (2) tecnologia (2) Anime (1) Api do Windows (1) Assembly (1) Eventos (1) Experts (1) GNU (1) Inglês (1) JSON (1) SO (1) datas (1) developers (1) dicas (1) easter egg (1) firebird (1) interfaces (1) introspecção (1) memo (1) oracle (1) reflexão (1)