Dicas para Criação de sites

Colocando vídeos em lightbox

Publicidade

Lightbox é aquele efeito aonde a foto abre dentro do próprio site sem carregar outra página.

O lightbox é geralmente ultizado para ampliar fotos, mas abaixo usaremos esse efeito para abrirmos um vídeo.

Clique aqui e veja o resultado

Veja abaixo o código em Javascript que foi utilizado:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script><script src="jquery.colorbox.js" type="text/javascript"></script><script type="text/javascript">        $(document).ready(function(){            $(".example1").colorbox({iframe:true, innerWidth:580, innerHeight:355});              });</script><a class="example1 cboxElement" href="materias/video-exemplo.html">Clique aqui e veja o resultado</a>

Analisando o código temos:
example1: essa é a classe que podemos configurar e renomeá-la de acordo com a nossa necessidade.
innerWidth: controla a largura do lightbox.
innerHeight: controla a altura do lightbox.

Em relação ao link precisamos somente indicar a página que queremos abrir e colocar a classe que criamos ( no caso a example1) e a cboxElement (que é obrigatória). Nesse caso eu criei uma página em branco chamando somente o video utilizado.

Podemos concluir então que podemos ultilizar quantos lightbox quisermos e em qualquer tamanho.

Clique aqui para download do arquivo.

Esse Script foi retirado do site:
http://jacklmoore.com/colorbox/

Para mais informações e mais demonstrações acesse o mesmo.