Gearbest promoção de Junho no pt site promotion
Acompanhe a gravação ao vivo do MxwebTV com participação especial
15/10/2010
Google comemora o seu aniversário!
17/10/2010

Utilizando o 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. Neste post você verá o funcionamento desta aplicação simples mas muito útil.

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.
zoomdigital
zoomdigital
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 Comentários

  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 *