11 5563-9074
Orçamento

Colocando vídeos em lightbox ou Modal

Script - Colocar vídeos em galeria Lightbox Modal
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>
<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.

Publicidade
Autor: Danilo Luna
Arte e Desenvolvimento