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>
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.
