Colocando vídeos em lightbox ou Modal
Script - Colocar vídeos em galeria Lightbox ModalO 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>
<style>
.exemplo1{
display: inline-block;
border: 1px dashed #000;
padding: 10px;
background: #ffffa2;
height: 20px;
opacity: 0.3;
-moz-transition: height 1s ease-out, opacity 1s ease;
-webkit-transition: height 1s ease-out, opacity 1s ease;
-o-transition: height 1s ease-out, opacity 1s ease;
transition: height 1s ease-out, opacity 1s ease;
}
.exemplo1:hover {
height: 70px;
opacity: 1;
}
.exemplo2 {
position: relative;
display: inline-block;
border: 1px dashed #000;
padding: 10px;
background: #ffffa2;
height: 20px;
opacity: 0.3;
margin:0 0 0 20px;
text-decoration: none;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
.exemplo2:hover {
opacity: 1;
-moz-transform: scale(2) rotate(30deg) translate(50px);
-webkit-transform: scale(1.2) rotate(30deg) translate(50px);
-o-transform: scale(2) rotate(30deg) translate(50px);
transform: scale(2) rotate(30deg) translate(50px);
z-index: 1000;
}
</style>
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.
Esse Script foi retirado do site:
http://jacklmoore.com/colorbox/
Para mais informações e mais demonstrações acesse o mesmo.
Arte e Desenvolvimento