Colocando o efeito Shadowbox em blogs do Blogger

Olá querido leitor, depois de ler um comentário com uma dúvida, postado pela leitora Ana Cavalcantti, resolvi criar este artigo para mostrar como colocar o efeito Shadowbox em um blog do Blogger. Esse efeito também é muito conhecido na web como "janela modular", e é muito útil para as pessoas que não querem que as imagens do blog abram em uma nova janela/aba ou que apenas querem aplicar um efeito mais moderno às imagens e vídeos do blog.


O que é o efeito Shadowbox?


O Shadowbox é uma aplicação de visualização de mídia que suporta os tipos de arquivos mais populares da web. O Shadowbox é escrito inteiramente em JavaScript e CSS e é altamente personalizável. Usando o Shadowbox, os autores de websites podem mostrar uma grande variedade de mídias nos principais navegadores sem enviar os usuários para outra página.
Fonte: http://www.shadowbox-js.com/index.html

Você pode conferir diversos exemplos desse efeito em funcionamento no nosso blog de testes. Esse efeito inclusive, permite o controle dos botões de "próxima imagem" e "imagem anterior" através das setas do teclado.

Como instalar o efeito Shadowbox no Blogger?


A instalação do script que gera esse efeito é bem simples, mas siga os passos descritos abaixo com bastante cautela para que não tenha dores de cabeça no futuro.

1. Primeiramente visite o endereço: http://www.shadowbox-js.com/download.html, para fazer o download do script.

2. Em seguida, escolha quais tipos de mídia que você quer que abram com o efeito Shadowbox, que podem ser: imagens, páginas de sites, arquivos em flash, vídeos dentre outros.

3. Escolha o idioma que você preferir para o efeito — há o idioma português brasileiro.

4. Clique em cima da imagem com a inscrição "ZIP" e salve o arquivo no seu computador.

5. Após salvar o arquivo, extraia o mesmo utilizando o programa Winrar ou qualquer outro programa de sua preferência.

6. Hospede os arquivos no seu servidor. Você deve hospedar apenas os arquivos: "close.png", "loading.gif", "next.png", "pause.png", "play.png", "previous.png" e "shadowbox.js".

NOTA: eu gosto de hospedar meus arquivos no site Webs, mas você pode hospedar no seu servidor particular (caso tenha um). Se você não tiver um servidor, você pode ver como criar uma conta no site Webs, e como utilizá-lo como site de hospedagem, neste artigo.

7. Abra o arquivo "shadowbox.css" com o bloco de notas e substitua os links das imagens pelo link das imagens que você hospedou.

8. Depois de substituir os links, salve o arquivo e hospede-o no mesmo lugar onde você hospedou as imagens e os outros arquivos.

9. Faça login no Blogger e acesse o painel de controle do seu blog, depois vá no menu Modelo, clique no botão Fazer backup / Restaurar e faça uma cópia de segurança do seu template clicando no botão Fazer download do modelo completo.

10. Clique no botão Editar HTML e, em seguida, pressione Ctrl+F para abrir a janela Localizar do navegador, e procure o código abaixo.

</head>

11. Imediatamente acima deste código, adicione este outro código.

<!-- Script do efeito Shadowbox -->

<link href="link-do-arquivo-shadowbox.css" rel="stylesheet" type="text/css"/>
<script src="link-do-arquivo-shadowbox.js" type="text/javascript"/>
<script type="text/javascript">
Shadowbox.init({
    handleOversize: &quot;drag&quot;,
    modal: true
});
</script>

<!-- Fim do script do efeito Shadowbox -->


Você deve substituir o que foi destacado em vermelho pelo link dos arquivo .CSS e .JS que você hospedou, mas tome cuidado, pois como os arquivos possuem o mesmo nome, você deve saber qual é o script e qual é o CSS.

Note que você pode mudar também a parte destacada em azul para: drag, resize ou none:

  • Drag: colocando esta opção, as imagens aparecerão em seu tamanho original, porém, o espaço do Shadowbox será limitado; caso a imagem seja muito grande, ao passar o mouse sobre a imagem o cursor se transformará em uma mãozinha (ou uma seta de quatro direções, dependendo do navegador usado), possibilitando que a imagem seja arrastada para os lados ou para cima e para baixo, facilitando que o leitor veja as partes da imagem que estavam ocultas;
  • Resize: colocando esta opção, caso a imagem seja muito grande, ela será reduzida automaticamente para um tamanho menor, para que possa aparecer completamente na tela do computador — eu não aconselho esta opção para quem utilizará este efeito em imagens de tutoriais, onde os leitores deverão ler algo que esteja escrito na imagem, pois as letras podem ficar muito pequenas após o redimensionamento;
  • None: colocando esta opção, nenhuma alteração será feita na imagem, porém, se ela for muito grande, poderá não aparecer completamente na tela.

Você pode mudar também, a parte destacada em rosa para: true ou false:

  • True: colocando esta opção, o leitor só poderá fechar a imagem (ou qualquer outro arquivo) que tenha sido aberta com o Shadowbox, se ele clicar no "X" de fechar ou pressionar a tecla "Esc" do teclado;
  • False: colocando esta opção, o leitor poderá fechar a imagem (ou qualquer outro arquivo) que tenha sido aberta com o Shadowbox, clicando no "X", pressionando a tecla "Esc" ou clicando fora da imagem.

Existem outras opções que você pode adicionar ao código, como por exemplo, fazer com que os vídeos comecem automaticamente quando forem abertos com o Shadowbox e etc. Eu não explicarei todos, pois o artigo ficaria muito extenso, e as opções estão em inglês. Caso você queira ver todas as opções disponíveis, visite a página de opções do Shadowbox.

12. Para finalizar a instalação do script, clique em Visualizar e, se estiver tudo certo, clique no botão Salvar modelo.

Infelizmente, esse efeito não é automático e deve ser adicionado manualmente nos elementos (imagens, vídeos, etc) que você quer que abram com o efeito do Shadowbox. Abaixo você pode conferir como adicionar o efeito nesses elementos.

Colocando o efeito nas imagens dos artigos


Para colocar o efeito nas imagens do artigo, será necessário que você edite o HTML do mesmo. Para editar o HTML do artigo, você deve clicar na opção HTML. Em seguida, é só você adicionar um dos códigos abaixo, dependendo do tipo de mídia que você quer usar, dentro do conteúdo do artigo.

Imagem com miniatura - processo 1


Para usar este código, você deverá ter 2 imagens: uma imagem em tamanho original e a mesma imagem em tamanho menor.

<a href="link-da-imagem-em-tamanho-original" rel="shadowbox" title="título-da-imagem"><img src="link-da-imagem-em-tamanho-menor" border="0" alt=""/></a>

Substitua o que está destacado em colorido, de acordo com o que é pedido e não se esqueça de colocar a parte: rel="shadowbox", que é o código responsável por indicar ao navegador que a imagem em questão deve ser aberta com o Shadowbox. Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Imagem com miniatura - processo 2


Caso você não queira, ou não possa, usar 2 imagens (uma grande e outra menor), como foi mostrado no exemplo acima, use o código mostrado abaixo.

<a href="link-da-imagem-em-tamanho-original" rel="shadowbox" title="título-da-imagem"><img src="link-da-imagem-em-tamanho-original" border="0" alt="" width="320"/></a>

Substitua as partes destacas em colorido, e mude a parte destacada em rosa, pelo tamanho da imagem que você quer que a miniatura tenha. Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Galeria de imagens


Além de mostrar uma única imagem, o Shadowbox permite que você crie uma galeria de imagens, que irão passar conforme o leitor clicar no botão Próxima imagem. O processo é o mesmo dos códigos anteriores, a única diferença é que você deve mudar a parte: rel="shadowbox" para rel="shadowbox[nome-da-galeria]" para cada imagem que você queira que apareça na galeria. Como mostra o código abaixo.

<a href="link-da-imagem-1-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-1"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-2-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-2"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-3-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-3"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-4-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-4"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-5-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-5"><img src="link-da-imagem-5-em-tamanho-original" border="0" alt="" width="100"/></a>


Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Galerias diferentes para cada imagem


Você pode criar também, várias galerias e fazer com que cada imagem abra apenas em sua determinada galeria, para isto basta colocar nomes de galerias diferentes para cada imagem, como no código abaixo.

<a href="link-da-imagem-1-em-tamanho-original" rel="shadowbox[ferias]" title="título-da-imagem-1"><img src="link-da-imagem-1-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-2-em-tamanho-original" rel="shadowbox[carros]" title="título-da-imagem-2"><img src="link-da-imagem-2-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-3-em-tamanho-original" rel="shadowbox[carros]" title="título-da-imagem-3"><img src="link-da-imagem-3-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-4-em-tamanho-original" rel="shadowbox[ferias]" title="título-da-imagem-4"><img src="link-da-imagem-4-em-tamanho-original" border="0" alt="" width="100"/></a>

<a href="link-da-imagem-5-em-tamanho-original" rel="shadowbox[carros]" title="título-da-imagem-5"><img src="link-da-imagem-5-em-tamanho-original" border="0" alt="" width="100"/></a>


Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Colocando o efeito em vídeos


O processo para abrir vídeos com o Shadowbox, é o mesmo que para as imagens, mas ao invés do link da imagem, você deverá informar o endereço do vídeo. Caso não saiba como conseguir o endereço do vídeo, veja o procedimento abaixo. Abra um vídeo do Youtube (ou de qualquer outro site), e procure o código de incorporação de vídeo (Embed), como ilustra a imagem abaixo.


Após clicar no botão de incorporar, será exibido um código semelhante ao mostrado abaixo.

<iframe width="560" height="315" src="http://www.youtube.com/embed/qxwry2qUwFs?rel=0" frameborder="0" allowfullscreen></iframe>

Localize no seu código a parte que é semelhante à que foi destacada em vermelho no código acima. Após localizar o código (que termina antes do ponto de interrogação) você deverá mudar a palavra "embed" para "v" (letra V) e o link ficará como o mostrado abaixo.

http://www.youtube.com/v/qxwry2qUwFs

E é assim que você deve adicionar o link do vídeo ao código do Shadowbox. Agora, basta escolher um dos códigos abaixo.

Vídeo com miniatura


<a href="link-do-vídeo" rel="shadowbox;height=386;width=515" title="título-do-vídeo"><img src="link-da-imagem-miniatura-do-vídeo" border="0" alt=""/></a>

Veja que você pode especificar qual será a largura (width) e altura (height) do vídeo; os valores devem ser especificados em pixels e estar separados por ponto e vírgula (;). Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Galeria de vídeos em miniatura


Assim como as imagens, é possível criar uma galeria com vários vídeos, basta colocar o nome da galeria no atributo rel. Veja o código abaixo.

<a href="link-do-vídeo-1" rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-1"><img src="link-da-imagem-miniatura-do-vídeo-1" border="0" alt=""/></a>

<a href="link-do-vídeo-2" rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-2"><img src="link-da-imagem-miniatura-do-vídeo-2" border="0" alt=""/></a>

<a href="link-do-vídeo-3" rel="shadowbox[divertido];height=386;width=515" title="título-do-vídeo-3"><img src="link-da-imagem-miniatura-do-vídeo-3" border="0" alt=""/></a>


NOTA: assim como nas imagens, você pode também especificar uma galeria para cada tipo de vídeo, basta usar o código acima e mudar o nome da galeria de acordo com a sua vontade.

Veja um exemplo de como ficará o efeito, em nosso blog de testes.

Colocando o efeito em links


Para colocar o efeito Shadowbox em links, é o mesmo procedimento dos códigos mostrados acima, só que ao invés de usar imagens em miniatura, usaremos palavras. Veja os códigos abaixo.

Imagem simples em link


<a href="link-da-imagem-em-tamanho-original" rel="shadowbox" title="título-da-imagem">Clique aqui para ver a imagem</a>

Galeria de imagens em link


<a href="link-da-imagem-1-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-1">Clique aqui para ver as imagens</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-da-imagem-2-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-2"></a>

<a href="link-da-imagem-3-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-3"></a>

<a href="link-da-imagem-4-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-4"></a>

<a href="link-da-imagem-5-em-tamanho-original" rel="shadowbox[galeria]" title="título-da-imagem-5"></a>
</div>


Video simples em link


<a href="link-do-vídeo" rel="shadowbox;height=386;width=515" title="titulo-do-vídeo">Clique aqui para ver o vídeo</a>

Galeria de vídeos em link


<a href="link-do-vídeo-1" rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-1">Clique aqui para ver os vídeos</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-do-vídeo-2" rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-2"></a>

<a href="link-do-vídeo-3" rel="shadowbox[divertido];height=386;width=515" title="titulo-do-vídeo-3"></a>
</div>


Veja exemplos do efeito aplicado em links, em nosso blog de testes.

Caso queira, você pode também misturar arquivos de tipos diferentes (imagens, vídeos, animações, etc) em uma mesma galeria, para isto basta misturar os códigos acima e adicionar o mesmo nome de galeria para cada arquivo, veja como ficaria o código.

<a href="link-da-imagem-1-em-tamanho-original" rel="shadowbox[galeria-completa]" title="título-da-imagem-1">Ver galeria completa</a>
<div style="visibility:hidden;display:none;height:0px;">
<a href="link-do-vídeo-1" rel="shadowbox[galeria-completa];height=386;width=515" title="título-do-vídeo-1"> </a>

<a href="link-da-imagem-2-em-tamanho-original" rel="shadowbox[galeria-completa]" title="título-da-imagem-2"> </a>

<a href="link-da-imagem-3-em-tamanho-original" rel="shadowbox[galeria-completa]" title="título-da-imagem-3"> </a>

<a href="link-da-imagem-4-em-tamanho-original" rel="shadowbox[galeria-completa]" title="título-da-imagem-4"> </a>

<a href="link-do-vídeo-2" rel="shadowbox[galeria-completa]height=386;width=515" title="título-do-vídeo-2"> </a>

<a href="link-da-imagem-5-em-tamanho-original" rel="shadowbox[galeria-completa]" title="título-da-imagem-5"> </a>

<a href="link-do-vídeo-3" rel="shadowbox[galeria-completa]height=386;width=515" title="título-do-vídeo-3"> </a>
</div>


Veja um exemplo de como ficará o efeito, em nosso blog de testes.

E este é o modo que o shadowbox deve ser aplicado nas imagens, vídeos e arquivos que você escolheu no momento do download do script. Explore o código e faça testes em seu blog de testes para entender melhor seu funcionamento.

Além de aplicar este efeito nas imagens e vídeos dos artigos, você pode aplicá-lo também nas imagens e vídeos dos gadgets e outros elementos do blog. Se você teve qualquer tipo de dúvida sobre o artigo, sinta-se a vontade para participar postando um comentário.

Atualização — 21.08.2011 às 03h50
O artigo foi atualizado para refletir mudanças realizadas no painel de controle da plataforma Blogger, e para uma reformulação do artigo. Se você não gostou do efeito Shadowbox, leia este outro artigo também sobre o efeito de janela modular.

Atualização — 17.10.2011 às 12h30
Como o leitor Diego de Assis reportou nos comentários, aparentemente há um problema na hora de fazer o download do arquivo ZIP na página de downloads do site Shadowbox. Esse problema ocorre somente para os usuário que estejam utilizando o navegador Google Chrome, portanto, para fazer o download, você deverá utilizar um dos navegadores a seguir: Mozilla Firefox, Opera ou Internet Explorer.
É terminantemente proibida a cópia de nossos artigos sem nossa expressa autorização!
Plágio é crime previsto no artigo 184 do Código Penal brasileiro e na Lei 9.610/98.
As informações contidas neste artigo estão desatualizadas? Notifique-me! Editar artigo
Igor Sousa é dono e criador do blog Hdblog (antigo Bloggando Na Web). Tem 24 anos, é paulistano e atualmente cursa o 8° Semestre em Ciências Contábeis. Blogar era apenas um modo de melhorar sua redação de texto, mas unida a sua vontade de ajudar as pessoas passou a ser um hobby.

Foram postados 44 comentários neste artigo!

  1. Oi Igoooorrr
    Eu ainda não segui minha cartilha rs ...eu preciso de silencio pra esse tipo de coisa rs , e essa semana affffff maria !!!!!
    Mas eu vou seguir tudo direitinhoooo e qq coisa eu grito rs !
    Beijoooos e obrigada novamente...vc é xuxú rsrs !!!

    ResponderExcluir
  2. Ana Cavalcantti: olá!
    Sem problemas, é assim mesmo, um passo de cada vez, rsrs.

    Faça em um blog de testes antes, para não ter nenhum tipo de problemas, e qualquer dúvida pode gritar sim! Rsrs.

    Obrigado pelo elogio e pelo comentário!
    Beijos!

    ResponderExcluir
  3. Olá, quando eu vou visualizar este efeito, logo depois não visualiza, aparece está mensagem: Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.

    Por quê aparece isso? Eu não consigo colocar este efeito, preciso de ajuda.

    Obrigada!

    ResponderExcluir
  4. Britney Spears: eu visitei seu blog e pude perceber que você usa a barra do site Wibiya.

    E ao passar o mouse sobre as imagens do seu blog, aparece um efeito de sobreposição com a frase “Click Here to Share”.

    Talvez o código desta barra esteja interferindo no código do Shadowbox.

    Outra medidade que você deve tomar, é ter certeza de que está inserindo os códigos como é citado no tutorial e de que não esteja alterando nada que não tenha sido citado.

    Tente aplicar o efeito em um blog de testes antes de aplicar no seu blog oficial.

    Espero que isso ajude.
    Agradeço a visita e o comentário.

    Volte sempre, beijos.

    ResponderExcluir
  5. Cara muito bom, mas não estou conseguindo colocar no meu blog. Erro (Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.)

    ResponderExcluir
  6. Cara nem esquenta a cabeça, consegui arrumar o código, agora ta tudo funcionando blz!

    ResponderExcluir
  7. Maurício: desculpe a demora na resposta!

    Eu ia sugerir que você tentasse instalar o código novamente, pois este erro ai aparece quando algum elemento do código, não foi fechado corretamente (óbvio), e ao analisar o código que forneci no passo 10 da instalação, eu vi que faltava fechar a linha de código do CSS.

    Desculpe ai, erro meu!
    Forte abraço.

    ResponderExcluir
  8. Igor, to apanhando. Não consegui instalar, dando erro na hora de salvar o html.

    ResponderExcluir
  9. Carlos: qual é o erro que aparece na hora de salvar o HTML?

    ResponderExcluir
  10. E ai Igor... sou eu novamente...

    ta dando o mesmo erro q o pessoal ta tendo ai...
    (Não foi possível analisar o seu modelo, pois sua formatação é inadequada. Certifique-se de que todos os elementos XML estão fechados adequadamente.
    Mensagem de erro em XML: The content of elements must consist of well-formed character data or markup.)

    e eu nao achei onde falta fechar...

    tem alguma coisa a ver q eu upei os arquivos css e js no google sites e as imgs no picasaweb??


    To no aguardo fera!!

    Abração

    ResponderExcluir
  11. Minelli: opa, seja bem-vindo novamente! Eu atualizei o código do passo 12, tente novamente e veja se agora dá certo! E quanto a hospedar as imagens em local diferente dos arquivos .css e .js, creio que não haja nenhum problema, mas eu ficarei te devendo uma resposta mais efetiva, pois eu nunca testei. Volte sempre! Abraços.

    ResponderExcluir
  12. Já fiz todos esses shadowbox, mais estou com problema em fazer um diferente.

    preciso colocar um link shadowbox em um (slide SWF com XML), no caso esse slide é o pequeno e quando clica vai abrir um (SWF).

    O link nao funciona em cima do slide !!!
    e outra coisa como eu tiro essa borda azul de linkagem dentro do arquivo .css ?

    Obrigado.

    ResponderExcluir
  13. Dj: para abrir arquivos em .SWF, é importante que você tenha escolhido o suporte à este tipo de arquivo no momento de baixar o script do Shadowbox, no passo 1 deste artigo. Em seguida você deve adicionar o código da seguinte maneira:
    <a href="link-do-arquivo.swf" rel="shadowbox" title="título-da-animação"><img src="miniatura-da-animação.jpg" border="0" alt="Clique aqui para ver a animação"/></a>
    Quanto à borda azul, eu não sei sobre o que você está falando, não vi nenhuma borda azul no efeito. Caso o problema persista, entre em contato novamente e informe o endereço do artigo aonde o problema está ocorrendo. Volte sempre!

    ResponderExcluir
  14. Igor!

    Tudo bem? Como está a facul??

    Tentei instalar mas dá o mesmo erro que a galera acima relatou. Vi que vc atualizou o código, mas ainda assim tá dando erro. O que pode ser?

    Abraço!

    ResponderExcluir
  15. Olá Sybylla tudo ótimo e com você? A facul está muito corrida, estou em época de provas, então estou estudando muito e tentando encontrar um estágio, o que faz com que o blog fique “um pouco” abandonado.

    Quanto ao seu problema, se puder informar o link de uma página onde você esteja usando o efeito, darei uma olhada para tentar achar o problema. Volte sempre. Abraços.

    ResponderExcluir
  16. cara ta dando erro ainda nao consegui e agora?

    ResponderExcluir
  17. Felipe: que tipo de erro está aparecendo?

    ResponderExcluir
  18. Amigo, sabe me dizer que existe a possibilidade de mudar a função da Shadowbox de "onclick" para "onmouseover" para que a imagem ou vídeo aparece apenas ao passar o mouse sobre o link ? Como faço isso ?

    Se não der para fazer com a Shadowbox, que outra alternativa eu poderia usar ?

    ResponderExcluir
  19. Phsnake: nunca tentei nada do tipo, mas você pode tentar achar dentro do arquivo .js (javascript) algum comando do tipo 'onclick' e mudá-lo para 'onmouseover'. Não conheço nenhuma alternativa que tenha a mesma função do Shadowbox já com a opção 'onmouseover', conheço apenas uma alternativa para o Shadowbox em si, que é o Lightbox, mas este só abre imagens.

    ResponderExcluir
  20. tenho uma duvida, no site que estou criando, uso o shadowbox numa pagina de agenda de eventos, onde tem varios elementos (miniaturas) que quando se clica, abrem com mais informaçoes pelo shadowbox. Quero adicionar o link “curtir” do facebook dentro do conteudo, aberto no shadowbox.. Ate ai td bem, só que seria interessante que quando uma outra pessoa, clicar no link divulgado dentro do facebook, quero que ela caia na página agenda, com o shadowbox aberto, referente ao link dela (e não a pagina do evento em si avulsa). Espero ter sido claro na minha duvida. Obrigado e parabens ai

    ResponderExcluir
  21. Igorbn: entendi a sua dúvida sim, mas creio que isso não seja possível de ser feito, pelo menos eu não sei como fazer, mas quem sabe não haja algo que possa lhe ajudar no site do Shadowbox. Desculpe não poder ajudar de uma forma mais efetiva. Agradeço a visita, volte sempre.

    ResponderExcluir
  22. Olá Igor, adoro o seu blog, visito todos os dias, eu gostaria de saber se você pode me ajudar, eu consigo instalar tudo direitinho, mas quando eu quero visualizar a imagem, vai para o mesmo lugar, ou seja abre e outra pagina, meu blog é esse: http://queen-bs02.blogspot.com , mas você só irá conseguir visualizar a imagem nesse endereço: http://queen-bs02.blogspot.com/2011/08/queen.html , espero que consiga me ajudar, pois vou lançar o site em alguns dias. OBS: esse é so o site de testes.

    ResponderExcluir
  23. Miguel, fico feliz que você goste do blog. Quanto à sua dúvida, ao olhar o seu código fonte, eu reparei que você adicionou o código do shadowbox de maneira correta à imagem, porém, eu não achei, no seu template, o script que cria o efeito. Para que o efeito funcione, você precisa seguir os passos de instalação (de 1 a 12) como foram descritos no artigo. Após ter feito a instalação o efeito deverá funcionar no seu blog. Agradeço as visitas! Volte sempre.

    ResponderExcluir
  24. Igor, eu fiz os 12 passos de novo e está tudo do mesmo jeito, mas eu acho que ja sei a fonte do problema, eu não consegui hospedar no Webbs como você pediu, eu hospedei no Megaupload, tem algum problema, porque, eu consegui hospedar as fotos, mas os 2 outros arquivos não!

    ResponderExcluir
  25. Miguel, não aconselho que você hospede os arquivos no Megaupload, pois com o passar do tempo eles podem ser excluídos. Tomarei essa sua dificuldade para hospedar os arquivos no site Webs como uma sugestão e publicarei, ainda esse final de semana, um artigo sobre como hospedar arquivos em tal site.

    ResponderExcluir
  26. Igor, como faço para deixá-las alinhadas lado a lado e não abaixo uma da outra?

    ResponderExcluir
  27. João Neto, para deixar as imagens alinhadas lado a lado, basta ao invés de usar os códigos um abaixo do outro, utilizá-los lado a lado, como no exemplo abaixo:

    <a ...><img .../></a> <a ...><img .../></a> <a ...><img .../></a>

    ResponderExcluir
  28. eu já baixei este arquivo zip outra vez só ue agora não estou conseguindo...
    será q o link está quebrado?
    lá no site de fazer o download do código.

    ResponderExcluir
  29. Diego, realmente, eu também não estou conseguindo baixar o arquivo ZIP nem o arquivo TAR. Tentarei entrar em contato com a equipe do site, e qualquer novidade eu atualizo o artigo!

    ResponderExcluir
  30. Diego, o artigo foi atualizado. A atualização está no final do mesmo.

    ResponderExcluir
  31. Igor... boa tarde;

    No passo 7, não sei como substituir pelos links das imagens. A cada # até o próximo # significa um link? Desculpe mas... sei que é uma cousa muito simples, haja visto que é em txt. Poderia me auxiliar nisto?

    Abraços...

    ResponderExcluir
  32. Jeizon, desculpe a demora em responder seu comentário. Quanto à sua dúvida, você deve substituir os links da seguinte maneira: ao abrir o arquivo com o bloco de notas, você verá alguns códigos como os mostrados abaixo:

    #sb-nav-next{background-image:url(next.png)

    Você deve substituir a palavra "next.png", pelo link da imagem "next", que você hospedou no passo 6. Ficaria da seguinte maneira:

    #sb-nav-next{background-image:url(http://www.site-de-hospedagem-exemplo.com/Imagem/next.png)

    Claro que o link da imagem irá variar, dependo de onde você hospedou as suas imagens. Espero que isso tenha respondido sua dúvida. Qualquer coisa, comente novamente.

    ResponderExcluir
  33. Ola Igor adoro o blog, mas tenho uma duvida. Como é que eu faço para escurecer o fundo, quando o shadowbox abre!?

    ResponderExcluir
  34. Jeizon, para deixar o vídeo igual ao que eu utilizo aqui no blog, basta seguir os passos:

    1- Adicione um gadget HTML/JavaScript ao seu blog.

    2- Dentro do campo de conteúdo do gadget, adicione este código:

    <a href="LINK-DO-VÍDEO" rel="shadowbox;height=416;width=515;" title="Assista esse vídeo"><img src="LINK-DA-IMAGEM" border="0"/></a>

    3- Substitua a frase LINK-DA-IMAGEM pelo link da imagem, como você já aprendeu a fazer. Substitua a frase LINK-DO-VÍDEO pelo link do vídeo que você quer. Você pode ver como adquirir o link do vídeo, na seção Colocando o efeito em vídeos no artigo.

    4- Salve o gadget e pronto!

    Espero que isso lhe ajude. Qualquer dúvida entre em contato novamente.

    ResponderExcluir
  35. Marreko, o fundo é escurecido automaticamente pelo Shadowbox, sem a necessidade de alterar nenhum código.

    ResponderExcluir
  36. Sim eu sei, mas queria saber como posso escurecer mais.

    ResponderExcluir
  37. Marreko, você deve adicionar o seguinte código: overlayOpacity: 0.8, ao código do passo 11. Seu código deverá ficar como o mostrado abaixo.

    Shadowbox.init({
    handleOversize: "drag",
    overlayOpacity: 0.8,
    modal: true
    });


    O valor 0.8 pode ser alterado para qualquer outro, e indica que haverá uma opacidade de 80% da tela ao redor do efeito. Lembre-se de colocar o valor em porcentagem. Exemplo:

    50% = 50 / 100 = 0.5
    27% = 27 / 100 = 0.27

    Onde / significa 'dividido'. Espero que isso resolva o seu problema! Abraços.

    ResponderExcluir
  38. me ajuda eu não consegui, eu ja fiz isso mais de 35 vezes e nada quando posto so aparece um monte de HTML........eu ja to ficando loko :( sério Igor me add no msn ai: rivaldo78@htmail.com
    que eu converso com tu la...URGENTEEEE!

    ResponderExcluir
    Respostas
    1. Olá Rivaldo, desculpe a demora em responder, a vida anda muito corrida. Faz muito tempo que não uso MSN, portanto, acho que não iria adiantar eu te adicionar. Quanto ao seu problema, é difícil de saber o que pode estar dando errado sem olhar como você fez a instalação dos códigos, há também a questão de onde você hospedou os arquivos. O artigo em que mostro como hospedar arquivos no site Webs está fora do ar, pois ele está desatualizado. Mas vou fornecer o link do vídeo para ti, talvez ainda dê para esclarecer sobre como hospedar seus arquivos: http://www.youtube.com/watch?v=_kXjVXxBidY. Tente instalar o efeito novamente, quem sabe utilizando um blog de testes, e caso não consiga, entre em contato novamente fornecendo o endereço do blog onde você está tendo problemas.

      Excluir