sexta-feira, 8 de julho de 2011
17:44 | 
Postado por
Giuliane |
Efeito ShadowBox Alternativa Sofisticada do Lightbox Um Efeito Maravilhoso em seu blog um visualizador de mídia baseado em aplicação web que suporta os mais populares formatos de meios de publicação escrito inteiramente em JavaScript e CSS e é altamente personalizável Usando Shadowbox.
Vá para página de Download dos Arquivos Clicando Aqui.
Nessa página você ira escolher os formatos que o shadowbox deverá executar.
Selecione o idioma, e configure como na imagem acima, ou se preferir escolha ao seu gosto
Feito Isso, escolha o formato de compressão e faça o download do arquivo como mostra a imagem abaixo. (Recomendo o arquivo ZIP).
Faça Download dos arquivos que serão utilizados e hospede em seu próprio site de hospedagem.
Se Não Tem Hospedagem Vou Recomendar O Webs.com e o freewebhostingarea
Você deve hospedar os arquivos em um servidor externo para que tudo funcione corretamente. NÃO HOSPEDE OS ARQUIVOS DIRETAMENTE DENTRO DO SEU TEMPLATE, caso contrário não irá funcionar.
Após hospedar os arquivos, copie os links e guarde-os, pois você precisará deles para colocar as urls no local indicado no próximo passo.
Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos Depois Não Me Culpe
Vá na aba "design" (antigo "layout"), clique em "editar HTML", não precisa clicar em "expandir modelos de widgets" e procure pela tag </head> e cole o seguinte código ACIMA dela.
<!-- Efeito ShadowBox -->
<link href='URL-DO-ARQUIVO-SHADOWBOX.CSS' rel='stylesheet' type='text/css'/>
<script src='URL-DO-ARQUIVO-SHADOWBOX.JS' type='text/javascript'/>
<script type='text/javascript'>
Shadowbox.init({
handleOversize: "resize",
modal: false
});
</script>
<!-- Fim do efeito ShadowBox -->
Sempre que você quiser usar o efeito em alguma imagem, Video, ou
outra janela modal de visualização que o efeito Para usar o Efeito em Imagens dentro do post, é necessário que você hospede a imagem em algum servidor de imagem qualquer
como o Picasa web, por exemplo. Não faça upload da imagem diretamente
no editor de postagens do blog, senão não irá funcionar. Para
chamar o efeito em imagens utilize o seguinte código, e cole o endereço
da sua imagem nos locais indicados (antes de rel="shadowbox").
<a href="URL DA IMAGEM" rel="shadowbox">
<img src="URL DA IMAGEM" width="200" height="200"></a>Para fazer o Efeito no estilo Galeria de Álbuns
Basta apenas usar o código. <a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM1" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM1" width="150" height="150"></a>
<a title="SEU-TITULO-AQUI" href="URL-DA-IMAGEM2" rel="shadowbox[galeria]"><img style=" title="SEU-TITULO-AQUI" border="0" alt="" src="URL DA IMAGEM2" width="150" height="150"></a>
Caso queira mais imagens com esse efeito apenas repita o procedimento quantas vezes for necessário. Para usar este efeito com Vídeos o procedimento é um pouco mais complicado.
É necessário que se copie o link fornecido noembed do Vídeo, geralmente após o "src=" como a parte destacada em vermelho.Pegue o link do vídeo fornecido que aparece no "embed" e cole-o no código de aplicação para o uso do shadowbox no video.
Para usar esse recurso em vídeos, use o código abaixo.
<a title="TITULO-AQUI" href="LINK-DO-VIDEO-AQUI" rel="shadowbox;width=480;height=385"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SEU-TITULO-AQUI" border="0" alt="" src="URL-DA-IMAGEM-MINIATURA-DO-VIDEO" width="150" height="150"></a>
Marcadores:
Efeito Shadowbox
Assinar:
Postar comentários (Atom)
0 comentários:
Postar um comentário