jQuery Gestures – Galeria de imagens que funciona através de gestos

June 3, 2009 at 7:37 pm · Categorias: Dicas de Javascript, Utilitários

jQuery Gestures é um plugin criado para possibilitar a interação com uma galeria de fotos através de gestos feitos com o mouse como: cima, baixo, esquerda e direita.

Para você ter uma noção das possibilidades, o código da página de demonstração vem com os seguintes comandos:

• esquerda – imagem anterior
• direita – próxima imagem
• cima – esconde imagem
• baixo – mostra imagem
• cima, baixo – mostra o título
• baixo, direita – esconde o título
• baixo, esquerda – entra na galeria de fotos do Flickr
• baixo, cima, direita, esquerda – mostra/ some com a ajuda

Mas ao utilizar o plugin no seu site, você pode configurar, via jQuery, exatamente o que você quer que aconteça a partir de cada gesto ou sequência de gesto.

Você pode por exemplo usar este código no seu portfólio quando for mostrar pra alguém ou fazer algum tipo de apresentação interativa ou até mesmo usar com uma interface touch.

Mas logicamente, as vezes, o script não entende perfeitamente o gesto que você fez mas ainda assim é um projeto muito interessante e bem inovador, teste só.

Compartilhe!

Comments (3) - Gostou do post? Envie para seu amigo

Motivos para usar o Google AJAX Libraries

May 6, 2009 at 7:37 pm · Categorias: Dicas de Javascript, Web developer

Pra quem não conhece, o Google possui um acervo com as bibliotecas Javascript, que são open source, mais comuns e mais utilizadas para que qualquer desenvolvedor possa usá-las em seus projetos web: Google AJAX Libraries.

Atualmente eles possuem em seu acervo as seguintes bibliotecas:

• jQuery
• jQuery UI
• Prototype
• script.aculo.us
• MooTools
• Dojo
• SWFObject
• Yahoo! User Interface Library (YUI)

Quais as vantagens em usar a biblioteca do Google?

A primeira vantagem é que, provavelmente, seu usuário não precisará baixar a biblioteca Javascript que você estiver usando em seu site pois ele já terá feito o download desta mesma biblioteca antes caso ele tenha passado por outro site que também usa o framework hospedado no Google.

A segunda vantagem é o download do script em paralelo com o restante do conteúdo do site, para não sobrecarregar os servidores, os navegadores limitam a quantidade de conexões simultâneas para cada servidor, ao usar outro servidor para hospedar sua biblioteca Javascript, seu site irá carregar mais rápido.

Como utilizar?

Existem duas maneiras de utilizar as bibliotecas hospedadas no Google AJAX Libraries, a que eu indico, por ser mais simples e acreditar, na minha humilde opinião, ser a mais rápida é essa:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

Você vai chamar a biblioteca Javascript direto pela sua URL como se fosse um arquivo javascript do seu site, no Google AJAX Libraries você encontrará todas as bibliotecas disponibilizadas, suas versões e respectivos links.

Compartilhe!

Comments (4) - Gostou do post? Envie para seu amigo

Listagem com diversos plugins e tutoriais de jQuery

April 13, 2009 at 3:08 pm · Categorias: Dicas de Javascript

O freelancer Hein Maas, há um tempo atrás, fez uma compilação com alguns dos melhores plugins e tutoriais de jQuery; o post está bem completo, vale a pena mandar a listagem para o seu delicious.

jQuery, pra quem ainda não conhece é uma das mais populares bibliotecas Javascript, foi criada para facilitar a interação entre o Javascript e o HTML, provavelmente, é a biblioteca Javascript mais utilizada e que mais cresce pelo mundo afora.

Vamos ao que interessa, segue o post: All the jQuery resources you’ll ever need. Não se iludam pelo título do artigo, apesar de ser uma ótima compilação, existe um mundo de ótimos plugins além dos listados.

Compartilhe!

Comments (4) - Gostou do post? Envie para seu amigo

jQuery Captify Plugin – Uma forma diferente de adicionar legendas em fotos

March 16, 2009 at 6:03 pm · Categorias: Dicas de Javascript, Tutoriais, Web developer

Captify é um plugin para jQuery que gera belas legendas nas suas fotos de uma maneira não intrusiva, através de rollover.

Existem algumas características do plugin que você pode alterar, como se a legenda aparecerá no topo ou na parte de baixo da imagem e escolher a animação que a legenda terá. O plugin foi testado no Firefox, Chrome, Sagari e até mesmo no lixo do IE.

Compartilhe!

Comments (2) - Gostou do post? Envie para seu amigo

SlideViewer – Plugin de Slideshow/ galeria de imagens usando jQuery

March 6, 2009 at 5:54 pm · Categorias: Dicas de Javascript, Utilitários, Web developer

SlideViewer é um plugin super leve (1,5 Kb!) que permite que você crie um slideshow/ galeria de imagem facilmente, com a ajuda do framework jQuery.

Seu uso é realmente simples, basta criar uma lista não-ordenada com imagens e adicionar uma classe à ela para que o script gere dinamicamente os links e o código necessário para transformar essa lista de imagens sem um slideshow.

Algumas configurações podem ser modificadas como o tipo de animação na transição das imagens e mexer no tooltip do slideshow caso instale mais um pequeno plugin. Um detalhe que é bom tomar cuidado é manter a mesma largura e altura em todas as imagens.

Para que o plugin funcione adequadamente, além do jQuery você também precisará instalar o jQuery easing.

Compartilhe!

Comments (3) - Gostou do post? Envie para seu amigo