Depois de explicar como instalar o Shadowbox no Blogger hoje vou explicar como usa-lo sem ser com uma simples foto.
O Shadowbox tem potencialidades para funcionar com imagens, videos de varios formatos, ficheiros em flash e até com paginas.
Como eu tinha dito no artigo anterior, para usar o Shadowbox com imagens bastava alterar um pouco o código da imagem carregada para ele funcionar, mas para o usar sem ter que carregar nada no blogger iremos usar apenas o código abaixo como base:
<a href="ENDEREÇO DO FICHEIRO" rel="shadowbox" >O QUE VAI APARECER NO BLOG</a>
Usando ficheiros FLV (videos tipo youtube):
Para usar o Shadowbox em videos deste tipo temos que copiar o codigo do video a usar no site onde está alojado (Embed):
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/VPqBRSlAkTc&hl=en&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/VPqBRSlAkTc&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
(exemplo do Youtube)
Neste código vamos apenas usar o endereço do video (a vermelho):
http://www.youtube.com/v/VPqBRSlAkTc
e substituir ENDEREÇO DO FICHEIRO (no código do shadowbox por este endereço e a parte O QUE VAI APARECER NO BLOG por Clicar para ver video.
Ficando assim:
<a href="http://www.youtube.com/v/VPqBRSlAkTc" rel="shadowbox" >Clicar para ver video</a>
Para terminar é necessário definir as medidas dos video. Essas medidas vão ser inseridas logo após a palavra shadowbox, separadas por ponto e virgula. Ficando assim para as medidas 600 pixels de largura (width)e 485 pixels de altura (height) que são medidas que normalmente uso:
<a href="http://www.youtube.com/v/VPqBRSlAkTc" rel="shadowbox; width=600; height=485" >Clicar para ver video</a>
O resultado é este:
Clicar para ver video
NOTA: para o video iniciar automaticamente basta adicionar &autoplay=1 ao endereço do video e antes da aspa.
Para outros tipos de ficheiro basta trocar o endereço do ficheiro a apresentar!
Tutorial shadowbox - parte II
Tutorial shadowbox - parte I
Varias pessoas me têm perguntado como se faz para visualizar fotos e videos do modo que uso no meu blog Pensamento pró fundo.
O efeito chama-se Shadowbox e neste artigo vou explicar e fornecer os códigos necessários para o poderem usar.
Para começar é necessário ter um local para alojar os ficheiros a usar pelo Shadowbox porque ele não funciona com ficheiros alojados directamente no Blogger.
No meu caso, para alojar fotos, uso o Photobucket mas existem muitos outros locais (como por exemplo o ImageShack).
As alterações no blog são bastante simples e é necessário apenas inserir alguns scripts.
Entramos no código fonte do blog (ver foto abaixo),
e procuramos a tag <head>.
Imediatamente acima colamos os seguintes scripts:
<script src='http://vicio.do.sapo.pt/shadow/jquery.js' type='text/javascript'/>
Depois disto, guardamos as alterações.
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-jquery.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/interface.js' type='text/javascript'/>
<!--[if lt IE 7]> <style type="text/css"> .dock img { behavior: url(http://vicio.do.sapo.pt/shadow/iepngfix.htc) } </style> <![endif]-->
<script src='http://vicio.do.sapo.pt/shadow/shadowbox.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/skin.js' type='text/javascript'/>
<link href='http://vicio.do.sapo.pt/shadow/skin.css' rel='stylesheet' type='text/css'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-en.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-img.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-swf.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-html.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-iframe.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-wmp.js' type='text/javascript'/>
<script src='http://vicio.do.sapo.pt/shadow/shadowbox-flv.js' type='text/javascript'/>
<script type='text/javascript'>
window.onload = Shadowbox.init;
</script>
Passando para a publicação,vamos criar um novo artigo e carregamos a imagem desejada clicando no icone como na imagem
Na janela que se vai abri escolhemos o carregamento da imagem por URL,
e ela vai mudar para esta,
onde vamos inserir o endereço da imagem que já deve estar alojada no site que falei no inicio.
Depois muda-se para a parte de Editar HTML na janela de edição do artigo e no código da imagem vamos adicionar o código
rel="shadowbox"
ficando algo deste tipo:
Gravamos o artigo e está pronto a ser visualizado no blog.
NOTA: A parte a roxo, no código acima, pode ser substituída por texto. É o que vai aparecer no corpo do artigo e vai servir como link.
Exemplo de imagem clicavel:
Exemplo de texto clicavel:
No próximo artigo irei explicar como publicar vídeos com este metodo.
