Coloquei o mesmo efeito em meu portfólio pessoal, nele você poderá vê que opitei por usar uma página PHP, mas poderia muito bem sem em HTML mesmo dentro do lightbox.
Para começarmos a configuração, baixe o pacote que estarei disponibilizando no link abaixo:
Lembrando que o pacote já inclui a biblioteca jquery.
Para instalar o script cole a pasta shadowbox_js dentro da pasta onde está sua página que será aplicado o efeito. Feito isso iremos utilizar o seguinte código abaixo no head do documento:
<link href="shadowbox_js/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="shadowbox_js/jquery.js"></script>
<script type="text/javascript" src="shadowbox_js/shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: 'pt',
player: ['img', 'html', 'swf','php','asp']
});
</script>
Após ter incorporado os scripts na página. Dentro da tag body iremos fazer os testes do efeito light box , aplicando a páginas , imagens , e videos de diversas empresas.
Veja todos os exemplos abaixo:
Abrindo Páginas HTML com Efeito LightBox
<a title="CxMasters" href="http://www.escolacompleta.com" rel="shadowbox">Ver o Site CxMasters com Efeito LightBox</a>
</body>
Você terá o title para por o nome do lightbox a ser aberto, o href que indica o que deverá ser aberto e o atributo rel=”shadowbox” que indica que abrirá dentro do lightbox.
Abrindo Videos do Vimeo com Efeito LightBox
<a title="CxMasters" href="http://player.vimeo.com/video/35483843" rel="shadowbox;width=600;height=450">Video CxMasters do Vimeo</a>
</body>
Observe que para abrir o vídeo utilizei também um link utilizando a tag . Porém junto ao atributo rel utilizei também width e height separando-os por “;”(ponto e vírgula). Para abertura de Videos é obrigatório utilizar width e height.
Veja que também utilizei o link direto do video que pode ser pego no código de incorporação do video , que o site do vimeo.com disponibiliza, assim como os outros.
Abrindo Videos do Youtube com Efeito LightBox
<a title="CxMasters" href="http://www.youtube.com/embed/Q4-ZwbfIneI" rel="shadowbox;width=600;height=450">Video CxMasters do Youtube</a>
</body>
A configuração para o youtube é semelhante a do vimeo.
Utilizei também o link direto do video que pode ser pego no código de incorporação do video , que o site do youtube.com disponibiliza.
Abrindo Imagem com Efeito LightBox
<a title="Imagem - CxMasters" href="lotipo_cxmasters.jpg" rel="shadowbox">
</body>
Abrindo Galeria de Imagens com Efeito LightBox
<a title="Galeria de Imagens CxMasters" href="imagem_01.jpg" rel="shadowbox[galeria_um]">Imagem 01</a>
<a title="Galeria de Imagens CxMasters" href="imagem_02.jpg" rel="shadowbox[galeria_um]">Imagem 02</a>
<a title="Galeria de Imagens CxMasters" href="imagem_03.jpg" rel="shadowbox[galeria_um]">Imagem 03</a>
</body>
Observe que para criar a galeria de imagem , utilizei o mesmo padrão de adicionar apenas uma imagem , contudo utilizei após o shadowbox entre colchetes o nome da galeria que aquela imagem vai pertencer. ex: rel=”shadowbox[galeria_um]“ mais a quantidade de imagens da galeria , rel=”shadowbox[galeria_dois]“ mais a quantidade de imagens da galeria.
Abrindo Divs com Efeito LightBox
<a rel="shadowbox" href="#cxmasters">Abrir Div</a>
<div id="cxmasters" style="display:none;">
<div id="conteudo" style="color:#FFF; padding:10px;">
Todo conteúdo a mostrar na div vai aqui!
</div><!--fim da div conteudo-->
</div><!--fim da div cxmasters-->
</body>
Bem pessoal é isso!
Esse tutorial foi tirado do site: escolacompleta.com
Até a Próxima!!
nao tem para blogger?
ResponderExcluirpoderá usar para o blogger se hospedar em algum servidor e instalar o script no seu blog :)
ResponderExcluirAleluia um que funfou direito no meu portfolio (jhowriosweb.netai.net), vlw! xD
ResponderExcluir