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.
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?
Muito fácil.
Bom hein…
gostei, meu primeiro, galera atenção nas “aspas”
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??
como q usa com o passador de imagens
Gostei muito. Eu só conhecia o lightbox, mas esse é bem mais prático e fácil de usar. Parabéns pelo tutorial.