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
ResponderExcluirOla, como posso usar esse efeito com videos em formato flv ou avi ou qualquer outro formato, estou querendo criar uma galeria de video com esse efeito.
ResponderExcluirGrato