
Dicas para Criação de sites
Colocando vídeos em lightbox
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.
Arte e Desenvolvimento
Assine nosso feeds e receba notícias todas semanas
Outras Soluções
Últimos Clientes
[veja todos]

JK Baterias

FabriLar Casas
