Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

Utilizando o Shadowbox

1 min read

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.

Philipe Cardoso Com 33 anos de idade, sou um carioca apaixonado por tecnologia e fotografia. Além de ser o criador do Portal Zoom Digital, que preserva sua essência desde os tempos em que era um blog, também sou um verdadeiro entusiasta e amante de todas as formas de tecnologia. Através do Portal, compartilho minha paixão pela tecnologia e trago as últimas novidades e tendências para os leitores. Também sou fascinado pelo mundo da fotografia, explorando o poder das imagens para capturar momentos únicos e transmitir histórias cativantes.

6 Replies to “Utilizando o Shadowbox”

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

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

Deixe um comentário

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