O Shadowbox é um clone do efeito Lightbox, mas não serve apenas para visualizar imagens em janelas modelares, pois é possível visualizar páginas web, ficheiros em flash, galerias com imagens, mapas e vídeos em vários formatos de distintos serviços. Veja umas demos abaixo:
Adicionar ao Blogger:
Implementar este efeito no Blogger é bastante fácil, antes de tudo basta descarregar os ficheiros abaixo, descompactá-los com o WinRar e hospedá-los no seu hosting.
Download:
Se não sabe como hospedar estes ficheiros leia o post abaixo:
Depois siga os passos abaixo:
1. Entre no Blogger e dirija-se a Design > Editar HTML.
2. Procure pelo código:
</head>
3. Acima dele cole o código abaixo:
<link href='URL_FICHEIRO_.CSS' rel='stylesheet' type='text/css'/>
<script src='URL_FICHEIRO_.JS' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
overlayColor: "#000",
overlayOpacity: "0.6",
});
</script>
Altere o que se encontra a cor pela url do ficheiro que lhe corresponde. No espaço a vermelho cole o url do ficheiro css (ficheiro com o nome shadowbox.css) que hospedou. No espaço a verde cole o url do ficheiro js (ficheiro com o nomeshadowbox.js). O código a azul é o código da cor da janela, se quiser utilizar outra cor basta fazer as alterações. O código a roxo á intensidade da opacidade.
4. Clique em Guardar/Salvar Modelo. O Efeito das janelas modelares multimedia foi adicionado ao seu blog.
Agora para que o possa aplicar este efeito aos seus elementos abasta copiar o código abaixo e fazer as alterações pedidas:
Imagem
Para adicionar o efeito a uma imagem ,basta copiar o código abaixo para o seu post e subsituir a parte a vermelho pelo url da imagem que quer utilizar:
<a href="URL_DA_IMAGEM" rel="shadowbox" title="NOME IMAGEM">Imagem</a>
Galeria de Imagens
Para uma galeria de imagens, basta adicionar o código destacado a vermelho abaixo:
<a href="URL_DA_IMAGEM" rel="shadowbox[galeria1]" title="NOME IMAGEM"><img style="width:100px; height:50px;" src="URL_IMAGEM1" /></a>
<a href="URL_DA_IMAGEM" rel="shadowbox[galeria1]" title="NOME IMAGEM"><img style="width:100px; height:50px;" src="URL_IMAGEM2" /></a>
<a href="LINK PARA IMAGEM" target="_blank"><img style="width:150px; height:100px;" src="URL_IMAGEM" title="Fonte TecMundo" /></a></span>
OU
<a href="LINK PARA IMAGEM" target="_blank"><img alt="tecnoblogicon" src="URL_IMAGEM" title="Fonte TecMundo" /></a></span>
Vídeo do YouTube
Para um vídeo do youtube, copie o código do vídeo que encontra na url da página do vídeo e cole-o abaixo na parte a vermelho:
<a rel="shadowbox;width=853;height=507;" title="NOME VÍDEO" href="http://www.youtube.com/v/CODIGO_VIDEO&rel=0&autoplay=1">YouTube<img style="width:150px; height:100px;" src="URL_IMAGEM" /></a>
Vimeo
Para um vídeo do Vímeo, copie o ID do vídeo que encontra na url da página do vídeo e cole-o abaixo na parte a vermelho:
<a rel="shadowbox;width=853;height=507;" title="NOME VÍDEO" href="http://vimeo.com/moogaloop.swf?clip_id=ID_VIDEO&autoplay=1">Vimeo</a>
Vídeo Google
Para um vídeo do Google, copie o código do vídeo que encontra na url da página do vídeo e cole-o abaixo na parte a vermelho:
<a href="http://video.google.com/googleplayer.swf?docid=CODIGO&autoplay=1&hl=pt&fs=true" title="NOME VÍDEO" rel="shadowbox;width=853;height=507">Vídeo Google</a>
Ficheiro SWF
Para um ficheiro SWF, copie o código do vídeo que encontra na url da página do vídeo e cole-o abaixo na parte a vermelho:
<a rel="shadowbox;width=400;height=300" title="NOME VÍDEO" href="URL_FICHEIRO.swf">Animação SWF</a>
Página Web
Para uma página web, copie a url da página e cole-a abaixo na parte a vermelho:
<a rel="shadowbox;width=853;height=507" title="NOME PAGINA WEB" href="URL_PAGINA_WEB">Página web</a>
Mapa
Para um mapa, copie a url da página do mapa e cole-a abaixo na parte a vermelho:
<a rel="shadowbox;width=425;height=350" title="NOME DO MAPA" href="URL_MAPA">Mapa Google</a>
Para aumentar a janela modelar altere o parâmetros width=405 (largura) eheight=340 (altura) do reproductor ou página web.
No caso da galerias de imagens, se quiser adicionar mais do que uma galeria altere rel="shadowbox[galeria1]" por rel="shadowbox[galeria2]", e assim sucessivamente com o número da galeria que está a usar (no mesmo post).
Em nenhum dos casos será mostrada uma imagem em miniatura como nos exemplos acima, mas sim uma hiperligação. Se quiser utilizar uma miniatura basta substituir a parte a negrito preta do código (ex: Mapa Google) pelo código abaixo, fazendo as alterações:
<img style="width:150px; height:100px;" src="URL_IMAGEM" />
Aí (parte a vermelho) deve adicionar o url da imagem que quer que apareça como miniatura.
Sem dúvida, o Shadowbox é um sistema de janela modelares multimédia bastante completo que podemos utilizar para apresentar distintos tipos de ficheiros multimédia de uma forma mais dinâmica e elegante.
Fonte: Rascunhosblogger
