Utilizando o Shadowbox | Zoom Digital : Reviews de Smartphones, Tutoriais, Notícias

Utilizando o Shadowbox

Por zoomdigital
Categoria: Destaques
out 16th, 2010
6 Comments
10539 Views

E aí galera, belezinha?!

Neste post vou compartilhar o uso de uma aplicação bem legal que é o Shadowbox.

O uso dele é bem simples e para o pessoal mais conhecedor dos recursos da jQuery, e seus plugins, não vão ver nada demais, porém, aos que ainda não conhecem a aplicação, fica a dica.

Mas o que é esse tal Shadowbox?

Shadowbox é um aplicação feita para visualizar os mais diversos tipos de mídias em um site sem precisar levar o usuário para fora do site ou outra página. Ele lembra muito o Lightbox, sendo que a diferença é que ele não carrega somente imagens, mas também vídeos, swf e outras páginas que não fazem parte do seu site.

Além disso o Shadowbox é compatível com a maioria dos principais browsers atualmente no mercado, ele também possui adaptadores para as principais bibliotecas javascript como jQuery, Prototype, YUI e Scriptaculous.

Como utilizar?

Primeiro você deverá baixar o Shadowbox aqui .

A maneira mais simples de configurar o shadowbox é colocar depois das tags <head></head> a seguinte chamada:

<link rel=”stylesheet” type=”text/css” href=”shadowbox.css”>

<script type=”text/javascript” src=”shadowbox.js”></script>

<script type=”text/javascript”>

Shadowbox.init();

</script>

Após isso basta colocar o atributo rel=”shadowbox” no link para fazer referência ao objeto de mídia a ser visualizado.

Abaixo um exemplo utilizando uma imagem:

<a href=”minhaimagem.jpg” rel=”shadowbox”>Minha Imagem</a>

Utilizando o Shadowbox

Simples, não é mesmo?!

Vale a pena também ler a documentação e utilizar da criatividade para utilizar ao máximo os recursos disponíveis e proporcionar em seus projetos uma experiência legal pros seus usuários 😉

Veja aqui alguns exemplos usando os outros formatos de mídia suportados pelo Shadowbox.

About "" Has 314 Posts

O Zoom Digital é um portal de tecnologia criado em 2008 e a 6 anos no mercado se consolidou como um dos maiores portais de tecnologia brasileiro.

6 Responses to “Utilizando o Shadowbox”

  1. Le Ellen disse:

    Eu fiz como o tutorial mostrou, mas ele não abre com o efeito Shadowbox, ele abre como um link simples em outra pagina. Já não sei mais como fazer pode me ajudar nisso?

  2. Kl@us disse:

    Muito fácil.
    Bom hein…

  3. erick disse:

    gostei, meu primeiro, galera atenção nas “aspas”

  4. Jefferson disse:

    Muito bom esse efeito, eu uso o lightbox, mais vou fazer um teste com esse, gostaria de saber se existe a possibilidade de abrir formulario com o shadowbox??

  5. samuel disse:

    como q usa com o passador de imagens

  6. Marcela disse:

    Gostei muito. Eu só conhecia o lightbox, mas esse é bem mais prático e fácil de usar. Parabéns pelo tutorial.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *