Efeitos Imagens Guest Post Autor Convidado
Efeito ShadowBox em Videos e Imagens
Esse artigo é um Guest Post escrito por Thiago Silva.
Neste artigo, o Thiago Silva nos apresenta o Efeito ShadowBox – Alternativa Sofisticada do Lightbox. Eu conferi e testei o efeito, e achei simplesmente maravilhoso e compartilho agora com vocês.
Efeito Shadowbox
ShadowBox® é um visualizador de mídia baseado em aplicação web que suporta os mais populares formatos de meios de publicação.
Shadowbox é escrito inteiramente em JavaScript e CSS e é altamente personalizável. Usando Shadowbox, é possíevl mostrar uma grande variedade de imagens, videos e outros arquivos na mesma página, sem que o usuário precise sair da página de vinculação.
Diferente do Lightbox que abre apenas imagens, o ShadowBox abre imagens, Vídeos, arquivos em swf e Flash Video, inclusive abre páginas sem precisar sair do seu blog.
Neste Artigo irei ensinar como Inserir esse recurso no seu blog.
1º Passo – Download dos Arquivos
1. Shadowbox.css
2. Shadowbox.js
Faça Download dos arquivos que serão utilizados nos links acima.
2º Passo – Hospedar os arquivos:
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.
– Veja relação com opções de Sites para hospedagem de arquivos.
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.
3º Passo – Configurar o código no seu template:
[becape]Segurança nunca é demais, portanto, recomendo que faça um Backup do seu template antes de prosseguir para evitar transtornos.[/becape]
Vá no menu “modelo”, clique em “editar HTML” e procure pela tag </head>
e cole o seguinte código ACIMA dela.
(Lembrando de inserir os links dos Arquivos Hospedados no local indicado no código)
<!-- 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 -->
4º Passo – Ativar o efeito shadowbox no seu blog:
Sempre que você quiser usar o efeito em alguma imagem, Video, ou outra janela modal de visualização que o efeito suporta, siga o procedimento a seguir.
Efeito Shadowbox em imagem:
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>
Efeito Shadowbox em galeria de imagens:
Para fazer o Efeito no estilo Galeria de Álbuns Basta apenas usar o código abaixo como mostra o exemplo a seguir.
<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.
Demo
Efeito Shadowbox em videos:
Para usar este efeito com Vídeos o procedimento é um pouco mais complicado.
É necessário que se copie o link fornecido no embed do Vídeo, geralmente após o “src=” como a parte destacada em vermelho. No exemplo abaixo, o código foi retirado do youtube. Veja:
<object width="480" height="385"><param name="movie" value="http://www.youtube.com/v/8VgLKXD-BoY&hl=pt_BR&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/8VgLKXD-BoY&hl=pt_BR&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"></embed></object>
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>
Notem que no código há necessidade de atribuir as dimensões de altura e largura para exibição do vídeo (em width=480;height=385). Esta Dimensões são necessárias, porém, podem ser personalizadas. Eu aconselho que você utilize as mesmas que são fornecidas no código “embed” do video.
Demo
Os sites de videos que suportaram o efeito shadowbox são:
www.youtube.com.br
www.megavideo.com
www.vimeo.com
www.vzaa.com
www.yahoovideo.com
www.googlevideo.com
Efeito Shadowbox em links:
Também é possível usar o mesmo efeito em links. Para Exibir o efeito através de link, basta apenas acrescentar a parte que mostra a miniatura da imagem como no exemplo a baixo.
<a title="TITULO-AQUI" href="URL-DA-IMAGEM" rel="shadowbox">TEXTO DO LINK AQUI</a>
Vale Lembrar que para quem já usa o Lightbox, não precisará configurar todos as postagens novamente. Pois o ShadowBox® é compatível com o lightbox.
Isso quer dizer que tanto faz você usar rel=”shadowbox” quanto rel=”lightbox”.
Tudo vai funcionar perfeitamente.
[alerta]Lembrando que, a funcionalidade deste script pode variar de acordo com o template.
Caso este script não funcione em seu blog, leia este artigo: Por que alguns scripts não funcionam no meu blog?, talvez você encontre resposta para o seu problema.[/alerta]
Para saber mais sobre o recurso, suas limitações e suas vantagens, e como personalizar mais esse recurso. Acessem a Página Oficial do ShadowBox®. Para saber mais sobre a sua licença de uso, acesse a página oficial de Licença do ShadowBox®.
Dúvidas a respeito deste script, é melhor entrar em contato com o site desenvolvedor.
Só lá eles poderão esclarecer melhor quaisquer dúvidas sobre esse recurso.
Este tutorial foi escrito e criado por Thiago Silva, para ser publicado EXCLUSIVAMENTE no Mundo Blogger.
Autor Convidado
Esse artigo foi escrito por um Autor Convidado. Confira no primeiro parágrafo do artigo as informações do(a) autor(a). Quer escrever um Guest Post no Mundo Blogger? Veja como no artigo: Publique seu artigo no Mundo Blogger
Então, eu já coloquei no meu blog este efeito só que parou de funcionar e pelo que eu vi no blog de exemplos, no link “Demo” também não está funcionando mais … O que é o problema? existe um possível de concerto?
com esse efeito de shadowbox a light box precisa estar ativada ou desativada??
Sim. É necessário desativar o lightbox nativo do blogger, para que o shadowbox funcione.
Não estou conseguindo hospedar o arquivo CSS. Já consegui hospedar o arquivo JS no Webs, mas quando copio o CSS e colo no webs não fucniona. Me ajude!!
Vc tem que fazer download dos arquivos e depois hospeda-los no webs. Não é para “colar” e sim HOSPEDAR.
sabe que no meu blog ficou legal, valeu pela dica
Pena…
Ainda assim o efeito é deslumbrante, e casou direitinho com o conceito do blog que criei (segue o endereço atualizado: setimasala.blogspot.com.br). Pensei então em redimensionar a imagem pro centro, tentando abaixar a tela que simula a do cinema. Como conseguiria, vocês tem alguma idéia sobre redimensionamento de imagem de fundo de tela?
Obrigadaço de antemão.
@Luciano:
Se existe esta possibilidade, eu desconheço.
Clau… Você é fundamental para a Internet… Parabéns por existir e manter a existência do Mundo Blogger!!!
Sobre este efeito, tentei e funcionou direitinho. Contudo, gostaria de saber se conseguiria jogar a janela de visualização do vídeo para o topo da página, pois meu tema cobra esse posicionamento (veja: cineantigo.blogspot.com.br).
Agradecido por atencipação, agradeço desde já!!!
Beijos!
nao da pra fazer dawlond nesse site naumm
Muito bom o tutorial, implantei no meu site, só uma pergunta, como faço para abrir uma imagem assim que a pagina inicial for carregada? desde já obrigado amigo.
clau, esquec te hospedar as imagens por isso tava errado..brigada mesmo assim
ola Clau, muito bom seu blog… no meu ñ ta aparecendo os botoes de fexar e avançar e retroceder …oq fiz de errado?/ deste ja agradeço.
Eduardo R.
Nossa estranho isso! No meu chrome funciona normalmente, até no IEca..
Infelizmente,não sei o que pode ter ocorrido no seu template, não tenho como te ajudar.
Oi, to tentando usar esse efeito e ele só funciona no Firefox, ja fiz de tudo pra rodar no Chrome, mas não vai, só quando copio os links de outro site/blog, ele funciona, mas dai se eu baixo o MESMO script e upo no meu dropbox, ele não funciona…
O problema é no dropbox? O que eu to fazendo de errado?
Kárcio Sángeles
Nunca testei fazer isso, portanto,nem posso te afirmar se é possivel ou não.
Olá Clau,
Muito boa a dica, gostaria de saber se tem como colocar o formulário de contato do WUFFO desse jeito na página.
Obrigado e parabens pelo excelente trabalho!
Ah, Clau, funcionou, muitíssimo obrigada!
Desculpa a dúvida besta, mas sou iniciante ainda!
Parabéns pelo seu site, ele me ajudou muito!
Att,
Mayara R
Hernanny
Não tenho ideia do que possa ter acontecido. No meu funciona normal em todos os navegadores.
No meu deu certo só no Firefox, porque será ? :S
Reinaldo
Os arquivos que vc tem que hospedar são os que vc baixou do site (CSS e JS). Tenta hospeda-los no site webs.com e verifica tb se vc está pegando a url do arquivo de forma correta.
Mayara
Vc tem que colocar as urls das imagens desta forma:
#sb-nav-previous{
background-image: url(http://cnbbne2.webs.com/Estrutura/previous.png);
background-repeat:no-repeat;
}
olá clau, boa noite.
Tenho tentado por esse efeito em meu blog, até criei um blog de teste, mas mesmo assim não deu certo.
Ospedei os arquivos nos seguintes sites:
CSS: http://www.fileden.com/
JS: googlecode.com
Quero saber se são só esses arquivos que tem que ospedar. Esses sites estão certos para esses tipo de arquivos?
Descupa as perguntas tão básicas, mas só iniciante. Tenha paciencia comigo….
Desde já obrigado.
Olá,
Eu instalei o código, funciona tudo direitinho, à exceção dos botões (fechar, pausa,próximo…) que não aparecem, mostrando uma caixinha preta no lugar dos mesmos. No código CSS, eu instalei o endereço de cada um nas linhas dos mesmos, mas continua não aparecendo. Fica pior, some até a caixinha preta.
(Inseri desta maneira: #sb-nav-previous{background-image:http://cnbbne2.webs.com/Estrutura/previous.png(previous.png);})
Estou colocando no lugar errado?
Agradeço se puder me ajudar.
Atenciosamente,
Mayara Renata
João Neto,
Bruno
Respondendo a pergunta de vcs: bom, o que eu fiz foi o seguinte, eu baixei o arquivo css diretamnente do site, e antes de hospeda-lo para inserir o link no meu template, eu editei o arquivo css, e inclui o código da borda dentro do css.
Sybylla
Aqui no meu blog ele tá normal. Não sei o que aconteceu com o seu. Vc já verificou se é algum problema no serviço de hospedagem que vc escolheu? Dá uma verificada nisso.
Estava funcionando bem até ontem e de repente parou. Parou para mais alguém também? =\
Como faz pra deixa a borda nao consegui por :/
Grande Clau, descobri uma coisa interessante. Pelo menos funciona comigo. Eu posso inserir imagens normalmente pelo editor do blogger, para adicionar o efeito eu clico em editar html e digito apenas [rel="shadowbox"] dentro da tag >>a href="url da imagem" rel="shadowbox" e pronto. Claro que apenas para uma única imagem, para várias não fiz testes estou usando o código para galeria.
Excelente dica Clau parabéns, você é demais.
Olá Clau,
Andei analizando seu blog e percebi que no seu ShadowBox há uma borda cinza ao abrir. Como você conseguiu obter este efeito?
Olá Clau,
Eu fiz tudo certinho, mas quando clica na imagem, em vez de escurecer a página e tudo mais, ela abre no final?!
Muito Obrigado, Funcionou Perfeitamente, menos com o Mozilla Firefox, no qual ele abre todo e sai do blogger.
Se Posse me dizer uma maneira de arrumar, eu Agradeço.
Mais msm assim, Parabéns !!
Olá, Clau
No meu não tá funcionado, eu fiz como você falou,mas não está dando certo.
Me ajude!
Kássio
Não me leve a mal não meu querido, mas os arquivos que eu utilizo AQUI no meu blog são de usos exclusivos para o MEU blog, principalmente pelo fato que eu possuo um host proprio, pago $$$$ mensalmente por ele (tiro $$ do meu bolso) e lá hospedo meus arquivos para serem utilizados por mim exclusivamente. Não autorizo de forma alguma a utilização dos meus arquivos hospedados por terceiros.
Os arquivos do site funcionam perfeitamente sim, até pq são eles que eu utilizo aqui. Eu baixei os mesmos arquivos e hospedei no meu host pago, só isso!
Se vc encontrou dificuldades, isso não te dá o direito de pegar arquivos hospedados no meu host, me tirando banda, e usar no seu template.
Clau, sempre vejo seu blog, é excelente, uma dica…
O arquivo que eles fornecem ao baixar direto do site na maioria das vezes não funciona o arquivo .css e .js, pra eu conseguir fazer funcionar tive que pegar diretamente no código fonte do seu site, queria te dar uma dica para pegar o arquivo css e js do seu site e deixar disponível.
abs
Clau, fiz tudo certinho, mais não funcionou comigo!
Descobri é um problema no meu templates.
Bjs
Consegui resolver o problema das bordas, ficou legal dá para mudar tudo pelo CSS… Só tenho uma dúvida… se alguém puder me ajudar a minha imagem, na parte superior logo abaixo da borda abre com uma pequena distância,como fazer para abri bem junto a borda???
No CSS esta assim #sb-body img{border:none;},mesmo assim na parte superior fica uma distância da borda.
Obrigada
Clau, eu fiz tudo certinho deu certo, porém o meu não aparece com esta borda arrendondada, tem como mudar o estilo???
Abs
Jonh
Sugiro que vc reporte seu problema diretamente no Forum de ajuda do Google Sites ou o forum oficial do Blogger.
Clau estou com um problema, eu hospedo os arquivos no google site, funciona direitinho. O problema e que o efeito so funciona se eu estiver conectado na minha conta google do site. Tipo se eu sair da conta google o efeito para de funcionar. Sabe o que pode ser?
Gilberto Araujo
Muito obrigada pela contribuição. essa dica eu não sabia. Valeu mesmo pela dica 😉
Fernando Ambrosio
Vc deve estar colocando o código html para as imagens de forma errada, pq se vc instalou os arquivos direitinho,não precisa mexer em nada no CSS.
Gostei muito da postagem, mas estou encontrando problemas para colocar no meu blog, de início funcionou mas alterei de imagens para o mais completo e pearou de funcionar tentei colocar o modelo antigo mas não deu certo. Ajude-me se for possível disponibilizar como alterar corretamente o CSS acho que estou errando nisto, obrigado!
Oi Clau…
Fuçando no Shadowbox… vi que é possível usá-lo também para um endereço web. Não sei se você sabe dessa, de qualquer forma resolvi compartilhar aqui =D. Bem, basta hospedar o endereço.html em um servidor, pegar o link e acrescentar a chamada do Shadowbox. ficou claro?
Kevvin Oliveira
Uma coisa que notei: no meu blog de teste (o que eu usei no demo) eu instalei o designer de modelo e o efeito tb não funcionou. Eu uso esse efeito no meu portfolio e aqui no MB, e funcionam corretamente. Estou tremendamente desconfiada q no designer de modelo esse efeito não funciona.
Desculpe dizer, mas o efeito não funcionou no seu blog de testes. Quero ver como ele funciona =].
PS: Meu navegador está atualizado e então provavelmten não é esse o problema.
Lukas
É este efeito! Vc já havia me perguntado isso e eu já tinha te respondido.
No blog de DEMO não dá pra ver o efeito. =/
O que isso faz mesmo Clau?
Eu gostei daquele efeito que usou no universo sombrio,quando clica nas imagens elas abrem na mesma pàgina e fica maior.
O Shadowbox é uma maravilha…
Não sei se perceberam, mas quem trabalha com criação de sites ou templates de blogs ou até mesmo quem linka muitos sites externos.
Com o Shadowbox seus leitores abrem o site sem precisar sair da sua página.
Isso significa que:
+Mais tempo no site
+Melhor indexado pelos motores de busca
+Maior comodidade pro leitor
@BrunoO:
É verdade, ele não entra em conflito com o Jquery, eu tb apliquei ele aqui no Gothic Darkness e adorei!
Obrigada pelo comentário e volte sempre!
Nuss que maravilha de POST esse PARABENS
Gothic Darkness ainda bem que ele não da conflito com o Jquery pois uso em meu TEMPLATE vlw mesmo MUITO MASSA SEU BLOG
Abraços!
[i]No que eu puder ajudar, pode contar comigo.
@Thiago:
Vc está muito mais interado e entendido sobre o Shadowbox do q eu, até pq vc já usa esse efeito no seu blog e está bastante familiarizado com ele. Se vc puder ajudar a tirar as dúvidas reportadas aqui sobre esse efeito aos nossos leitores, eu agradeço imensamente.
Luiz,
Você pode personalizar o código todinho.
No meu blog você consegue visualizar o contorno com bordas arredondadas (exceto com o IE)
O código é totalmente personalizavel.
Caso não consigam usar a opção de base JQurey
Recomendo que use a padrão mesmo (standalone)
A forma de exibição também é configuravel.
Ou seja,
Aqui no GD foi indicado o resized (Na minha opinião a melhor).
Mas também pode ser usado:
Clipped ou Draggable.
Sempre que puder ajudar estou a disposição 😉
@Luiz:
Dúvidas a respeito deste script, é melhor entrar em contato com o site desenvolvedor.
Só lá eles poderão esclarecer melhor quaisquer dúvidas sobre esse recurso, inclusive como personalizar o css dele.
Sobre a rádio, por se tratar de um script e o shadowbox tb ser a base de script, vc tem q tomar cuidado e verificar se não vai dar conflito entre si.
E se der, vc terá q escolher qual é mais importante pra vc.
Não tenho muito conhecimento sobre html e css, mas já consegui fazer bastante coisas com o blog que eu tenho seguindo seus ótimos conselhos por aqui =]
Mas tenho duas dúvidas, com relação a esse shadowbox:
– Eu posso mudar a cor do contorno e o formato dele para ficar parecido com o lightbox (que é muito legal!)?
– Tenho uma rádio no blog. Não consigo de jeito nenhum fazer ela só aparecer na página inicial, deve ser algum erro de script ou algo assim, mas com esse recurso, no caso de exibição de vídeo, o som para e somente o som do vídeo é executado?
Me desculpe pelo questionamento imenso e obrigado pelas outras várias ajudas.
Muito útil mesmo seu blog!!!
@?·?•?þ?uL??ho??•???- ADM:
Está funcionando sim, inclusive vi alguns blogs que implemnentaram esse recurso e tá normal. Vc deve ter feito algo de errado. Dúvidas a respeito do script, é melhor entrar em contato com o site desenvolvedor.
Só lá eles poderão esclarecer melhor quaisquer dúvidas sobre esse recurso.
@Mary:
Era um problema que tinha ocorrido no meu servidor, mas a Uolhost me falou que o problema já tinha sido solucionado. Ainda continua?Vou entrar em contato com eles novamente. Õ.Õ
@Andressa Quadro
@Vanessa Pereira:
Que bom que vcs gostaram. Já estava na hora de dar um toque mais feminino aqui né? Até pq cansei de ver gente achando q eu era homem. Muitos leitores achavam que o blog era administrado por homem acredita?
Agora matei 2 coelhos numa cajadada só..rs.
Gothic Darkness agora no estilo mais delicado e completamente feminino, lol…
=P
Obrigada pelos comentários e pela participação viu meninas.
adorei o novo lay! Ficou lindo com detalhes em rosa! =)
Oi Clau muito legal este efeito, adorei!
Aproveito para te parabenizar pelo novo visual do blog, está lindo! Esses tons rosados deixaram-o mais feminino, ficou mais leve também! Ótimo trabalho!
Abraços
Oi amiga! o meu antivirus continua de preconceito com teu blog huahauha mas to abrindo mesmo assim =) Adorei mto o layout novo super lindo! Gostei mto desse post depois vou testar. Bjinhos
Adorei !
muito bom mesmo !
Ola darkness, acho que o efeito não ta funcionando! É uma impressão minha ou estou certo?