quarta-feira, fevereiro 19, 2014

Código para criar Lightbox com iFrame no Blogspot

Esta dica é para você colocar um LightBox dentro do seu Blogger.

Esta dica funciona principalmente no Blogspot, mas deve funcionar também em outros sites. Logo abaixo você pode ver dois exemplos de como ficará seu LightBox funcionando. Na sequencia você encontra as instruções para instalar os códigos no HTML e na Postagem para fazer tudo funcionar.

Coloquei nesta dica a opção de fazer dois LightBox diferentes dentro da mesma postagem, alterando apenas o código 'black_overlay', duplicando o código e acrescentando o número 1 depois, mas não se preocupe que já está tudo devidamente testado nos códigos.

>> Vamos aos exemplos:

A) Este é um exemplo de Lightbox que abre uma URL dentro de um iframe.
fechar

B) Este é outro código que permite um segundo Lightbox com URL diferente dentro de outro iframe no mesmo post.
fechar

>> Agora vamos aos códigos:

1. Para fazer este LightBox funcionar no seu Blogger primeiro você deve colar este código (abaixo) logo depois da tag <head> no código fonte. Vá até a opção 'Modelo', depois em 'Editar HTML' e cole esse código lá:
<style>
        #black_overlay{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        #white_content {
            display: none;
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            padding: 1px;
            border: 1px solid white;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>


<style>
        #black_overlay1{
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
        }
        #white_content1 {
            display: none;
            position: absolute;
            top: 5%;
            left: 5%;
            width: 90%;
            height: 90%;
            padding: 1px;
            border: 1px solid white;
            background-color: white;
            z-index:1002;
            overflow: auto;
        }
    </style>



Uma vez que o código acima estiver instalado dentro do seu código você poderá usar 2 LightBoxes dentro de qualquer post.

Para isso basta você acrescentar dentro da postagem os seguintes códigos:

2. Acrescente dentro do post que você quiser usar um LightBox o seguinte código:
A) Este é um <a href="javascript:void(0)" onclick="document.getElementById('white_content').style.display='block';document.getElementById('black_overlay').style.display='block'">exemplo de Lightbox que abre uma URL dentro de um iframe.</a>

<br />
<div id="white_content">
<a href="javascript:void(0)" onclick="document.getElementById('white_content').style.display='none';document.getElementById('black_overlay').style.display='none'"><img align="right" alt="fechar" border="0" src="http://4.bp.blogspot.com/-VvM7frE5htA/UwPbFg4s-cI/AAAAAAAACQ8/6_6xYIneTnU/s1600/close.jpeg" /></a>

<iframe height="100%" src="http://www.uol.com.br" width="100%"></iframe>
</div>
<div id="black_overlay">
</div>

O código acima é exatamente igual ao usado neste post para exemplificar o item A).

Este código inclui uma imagem de um (X) no canto superior direito que serve para fechar o LightBox. Você pode substituir esta imagem por outra qualquer ou ainda usar a palavra 'fechar' no lugar da imagem. Esta imagem está hospedada dentro da minha cota de imagens do Picasa.

3. Agora vai o outro código com o segundo LightBox. Este código é quase idêntico ao código acima e serve para abrir um LightBox com um iFrame contendo uma URL diferente da primeira.
B) Este é outro <a href="javascript:void(0)" onclick="document.getElementById('white_content1').style.display='block';document.getElementById('black_overlay1').style.display='block'">código que permite um segundo Lightbox com URL diferente dentro de outro iframe no mesmo post.</a>

<br />
<div id="white_content1">
<a href="javascript:void(0)" onclick="document.getElementById('white_content1').style.display='none';document.getElementById('black_overlay1').style.display='none'"><img align="right" alt="fechar" border="0" src="http://4.bp.blogspot.com/-VvM7frE5htA/UwPbFg4s-cI/AAAAAAAACQ8/6_6xYIneTnU/s1600/close.jpeg" /></a>


<iframe height="100%" src="http://www.terra.com.br" width="100%"></iframe>
</div>
<div id="black_overlay1">
</div>

2 comentários:

willian monteiro disse...

muito bom, sensacional
funcionou perfeitamente

Fronza disse...

Boa tarde, no meu está abrindo a mesma imagem no lightbox mesmo com a referencia a imagens diferentes, sabe o que pode estar acontecendo ?

Grato ;)