20/04/2010

Fazer o efeito LightBox - Imagens em Destaque

O efeito Light Box é mais simples do que parece de ser colocado no blog, esse efeito faz que ao clicar numa imagem ela apareça sobre o pagina inteira do blog e cobrindo o restante da tela com um tom de cor mais escura. Vamos mostrar numa imagem para ficar mais fácil de entender.

Efeito LightBox
Veja aqui o efeito lightbox funcionando em uma pagina de amostra. Esse código é um pouco longo, mas é simples de colocar no blog e modificar no seu blog, entre na pagina layout, adicionar gadget, html/javascript e insira o código abaixo:

<style type="text/css">
<!--
#lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}
#lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}
#lightbox img{ border: none; }
#overlay img{ border: none; }
#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}
* html #overlay{
background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");}
-->
</style>
<script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/lightbox.js"></script>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>

As únicas coisas que precisa alterar aqui são os endereços das imagens ou texto e as legendas nesta linha.

<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>

Tenha cuidado para usar o endereço certo das imagens, senão o código não funcionará, vamos mostrar como alterar esse código para colocar suas imagem com o efeito LightBox, veja as partes do código:

Imagem em destaque essa é a imagem que aparecerá na janela Light Box quando alguém clicar no link

Minha legenda este texto aparece embaixo da imagem em destaque dentro da janela Light Box.

Imagem ou texto, aqui é como aparecerá no blog o link para ver a tal imagem em destaque, você pode escrever, por exemplo, “Gato Bêbado” como fizemos em nosso exemplo ou colocar qualquer outro texto.
Também é possível usar uma miniatura da imagem que será exibida como se fosse uma galeria de fotos, então use esse código <img src="url da miniatura" border="0" /> no lugar do texto. Porém sugerimos não usar a mesma imagem que usará como destaque isso porque vai demorar muito para carregar, o correto é salvar e hospedar duas imagens com tamanhos diferentes, uma em tamanho natural para colocar em destaque (aparecer somente quando clicar) e outra em tamanho reduzido para servir como link para outra imagem grande.

Para mostrar varias imagens neste sistema só precisa repetir essa ultima linha do código quantas vezes forem necessárias, por exemplo:

<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
<a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a>
.....

A parte inicial do código que não está aqui é porque não é necessário repeti-la, ela funcionará para todos eles não importa quantos sejam.

Fundo semi transparentePara fazer o resto da tela ficar com uma cor mais escura usamos uma imagem semitransparente que está ao lado, mas se muitas pessoas usarem a mesma ela pode ser excluida por estar em uma hospedagem gratis, então sugerimos salvar e hospedar essa imagem e depois colocar o endereço dela neste trecho do código:

#overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png)

Claro que se desejar pode usar qualquer outra imagem para cobrir o restante da tela, isso é uma questão de gosto pessoal.
Related Posts with Thumbnails

128 comentários:

  1. Parabéns, muito ótimo Tutorial estou utilizando !

    ResponderExcluir
  2. Tem algum geito de colocar isso na imagem da postagem?

    ResponderExcluir
  3. não testei nas postagens.

    envie as imagens normalmente para o blogger depois troque o código gerado pelo blogger pelo que publicamos aqui, deve funcionar.

    ResponderExcluir
  4. Eu achei um que funciona em postagem, mais não vou falar aqui sem permissão, mandei pra você por email fabiano...
    uma duvida, tem alguma maneira de por uma setinha pro lado para fazer como um álbum de fotos?

    ResponderExcluir
  5. Ótima dica para deixar o blog ainda mais Interativo. De uma olhada em alguns plugins que ajudam bastante na Instalação.

    Abraços
    Rogério Gomes

    ResponderExcluir
  6. vi seu email a unica diferença é que o outro código não mostra o CSS ele já está hospedado em outro site.

    ResponderExcluir
  7. Oi Fabiano, estou levando o seu banner pra divulgação e espero ver o meu link em breve no TOP Parceiros!
    Abraço,
    Dani

    ResponderExcluir
  8. E fabiano, em questão da "setinha" mostrando outras fotos e possivel ? ou apenas em flash...

    ResponderExcluir
  9. Oi, Fabiano! Prmeiramente quero dizer que se deixei de ser uma analfabeta em blogs devo a você, em primeiríssimo lugar. Estou melhorando bastante, embora meu caminho ainda seja longo. Acabei de mudar o modelo do meu blog para o template Josh Peterson. Espero que você continue me auxiliando. Agora, quanto à imagem acima, eu entendi do que se trata, mas na minha tela ela aparece como um link, abrindo em uma nova aba, não aparecendo o efeito desejado, Por quê? Grande abraço e ótimo feriado!

    ResponderExcluir
  10. Professora Maluquinha
    talvez não tenha esperado a pagina carregar completamente, por isso deu esse erro.


    L. Tadeu
    para mostrar o javascript com as setas é bem mais complexo que isso pois envolveria links dentro da janela.

    não tentei fazer sei que é possivel mas tem que ser o código escrito para cada galeria de imagens acho que não como fazer um código como esse que qualquer um pode copiar e mudar apenas alguns detalhes.

    ResponderExcluir
  11. não tem como colocar como estilo Css? para que fique no meu blog inteiro que no caso é da webnode?

    ResponderExcluir
  12. Quero fazer uma pergunta nada aver com a postagem como fez aquele nome personalizado que tem escrito dicas para blogs?

    ResponderExcluir
  13. E ai Fabiano olha eu aqui de novo, rsrsrs, como sempre te enchendo o saco, kkk, me fala uma coisa, o que você acha que eu devo fazer no meu blog, para melhorar-lo(se é se existe essa palavra) ? o link e : www.blogsportmade.blogspot.com , por favor cara me ajude. Desde Já Agradeço. Abraço. Sucesso !!!

    ResponderExcluir
  14. é dificil dizer o que fazer para melhorar um blog, isso depende do que cada um gosta.

    veja nossas enquetes, assim terá uma idéia do fazer e não fazer no blog.

    O que você não gosta em um blog?

    O que você procura em um blog?

    ResponderExcluir
  15. Olá, obrigado por responder rápido :D, legal as enquetes, mas nao sei como elas poderiam me ajudar, :/. Desde Já Agradeço. Abraço. Sucesso !!!

    ResponderExcluir
  16. E ai fabiano, tava dando uma olhada no seu blog hoje a tarde, e vi um erro, eu fui assinar o feed para receber dicas no meu email, coloquei o email direitinho, cliquei em enviar, quando abriu a janela pra coloca o codico de ativacao, coloquei o codigo e cliquei pra ir, ai foi e apareceu um erro na pagina, e travou o computador, tive que reiniciar, dê uma olhada na foto pra você entender melhor, http://img85.imageshack.us/img85/9214/errodosite.png, Sucesso. Abração.

    ResponderExcluir
  17. mais uma duvida
    no seu blog onde tem escrito seguidores mostra o numero de pessoas q são seguidoras
    como faço pra mostrar a quantidade pois no meu só aparece as fotos e a palavra seguidores ñ aparece a quantidade em numeros

    ResponderExcluir
  18. Eu adoooro este site! É o que melhor dá as dicas existentes na Internet. Parabéns, sou umas das seguidores já faz algum tempo. Beijos

    ResponderExcluir
  19. Sport Made
    deve ter sido um erro momentâneo do feedburner, agora parece normal.

    Glamorous Woman
    tente excluir o gadget dos seguidores e depois colocar novamente, deve resolver o problema

    ResponderExcluir
  20. Pois é Fabiano, bem que você falou ! foi só um erro momentâneo do feedburner, pois fui tentar denovo e consegui, deu certinho !Sucesso. Abração

    ResponderExcluir
  21. Pois é Fabiano, bem que você falou ! foi só um erro momentâneo do feedburner, pois fui tentar denovo e consegui, deu certinho !Sucesso. Abração

    ResponderExcluir
  22. legal, o javascript eh pequeno
    nao pesa muito

    ResponderExcluir
  23. oooi *-*
    eeu faço todo o procedê certinho , mas quando clica na legenda para abrir a imagem com o efeito , a imagem é aberta em outra aba D:
    Ajuda Please *-*

    ResponderExcluir
  24. olha só, adorei essa ideia, mas queria colocar nas fotos das postagens, vi que alguem ai já comentou sobre isso, e faluo de uma outra maneira pra fazer, mas foi em off, vc teria alguma dica de como fazer, poderia colocar ela aqui para usarmos né...to te seguindo..

    ResponderExcluir
  25. Patricia Correia de Amorim
    o outro jeito de fazer é praticamente igual a esse, só mudou a forma de explicar.

    estou procurando um outro código com as setas ou links para mostrar as fotos antes e depois, assim que achar vou publicar aqui.

    ResponderExcluir
  26. Parabens, acho que realmente isso dá um visual legal nas imagens. Porém por não saber o nome real do efeito fica difícil procurar um tutorial. Valeu ai. Se quizer visite meu blog de Internet e tecnologia em Geral. http://fazendovoce.blogspot.com

    ResponderExcluir
  27. Há dias que venho tentado colocar esse recurso no meu blog mas não consigo. Na verdade eu não entendi bem qual é esse endereço certo das imagens.
    Pode me dar uma ajudinha?
    Gracias,
    http://espumadecheiroartesanato.blogspot.com

    ResponderExcluir
  28. Conseguir fazer abrir a lightbox mas aparece sem fundo nenhum, a pagina mostra normal atras e tambem nao tem nenhum fundo branco, mostra a imagem e o botao fechar fica flutuando sem fundo. O que pode ser?

    ResponderExcluir
  29. Ai Galera consegui!

    Ó Para quem quiser usar isso nas postagens faz o seguinte vai em LAyout Editar HTML e procura por /head> cola o script dentro disso! ai nas postagens é só colocar o código de <a href .....

    ResponderExcluir
  30. não resultou BarrosoPC, tentei de tudo, diferentes formas, mas não funciona nas postagens!

    coloquei o código css antes de /head, coloquei o código das imagens dentro do post, mas o efeito não acontece

    ResponderExcluir
  31. Dav7
    talvez seu template tenha alguma adpatação que está gerando conflito, nos testes que fiz funcionou da primeira vez. mas tente colocar tudo com um gadget de html/javascript teoricamente é para funcionar.

    ResponderExcluir
  32. Olá,
    como que faz para todas imagens do blgo ficar com esse efeito ?

    ResponderExcluir
  33. Marlon Douglas
    não tem como fazer em todas as imagens, precisa alterar os códigos uma por vez.

    ResponderExcluir
  34. Esse java so funciona no firefox! IE, Google e opera não funciona!
    Ou tem como fazer funcionar?

    ResponderExcluir
  35. fiz testes e funcionou nos 3 navegadores, tente colocar o código novamente.

    ResponderExcluir
  36. Fabiano não estou conseguindo fazer o lightbox no meu blog eu coloco os codigos mas a foto só abre se clicar no link e abre uma foto enorme, como faço pra abrir ela em lightbox apenas clicando em cima da foto? e com tamanho ideal?
    a cara parabens pelo blog estou aprendendo pracaramba cara. obrigado mesmo.

    ResponderExcluir
  37. Opera Mix Jeans Wear
    você precisa enviar a foto já no tamanho certo, não tem como controlar o tamanho delas pelo código

    ResponderExcluir
  38. o site pra hospedar pode ser o imagemshack?

    obrigado pela ajuda cara estou aprendendo d++++++++++++++++++ no seu blog

    ResponderExcluir
  39. sempre usei o imageschack, acho um bom site de hospedagem grátis

    ResponderExcluir
  40. Fabiano, posso pedir um favor ?

    Tem como você por os créditos; "Widget Efeito LightBox" ... um pouco longe do "Fechar" , pois isso atrapalha muito. Se você coloca-se mais um espaço e um pouco para a direita, agradeceria mto.

    Alias... Mto obrigado pela contribuição do Script, pois esse é único que funciona perfeitamente com o Widget de Seguidores.

    ResponderExcluir
  41. NoskireBR
    vou colocar um pouco mais de espaço, obrigado pela sugestão.

    ResponderExcluir
  42. Olá fabiano, eu tava procurando um codigo para colocar esse efeito nas imagens, Só que nas postagem... eu tentei colocar e funcionou beleza, fica um visual bem melhor, parece codigos php usados em sites, otimo codigo!
    vlw ai galera
    www.webmaycon.net

    ResponderExcluir
  43. Não consigo colocar no formato que aparece no desenho. Ele abre uma nova página como se fosse visualizar uma figura no windows.O que deve estar acontecendo?

    ResponderExcluir
  44. Fabiana Anunciação, precisa esperar a pagina carregar por completo, pode ser uma falha momentanea na conexão com o site.

    veja aqui o código lightbox funcionando em uma pagina de amostra


    vamos atualizar essa postagem e colocar o exemplo no tutorial, assim outras pessoas poderão ver.

    ResponderExcluir
  45. Por que esse código não dá para ser utilizado no UOL Blog?

    ResponderExcluir
  46. Anna Luiza
    era para funcionar em qualquer blog ou site, mas alguns usam tags e métodos próprios que geram erros. Infelizmente nem tudo que funciona em um site dá certo em blogs.

    ResponderExcluir
  47. bem, não sei o que deve estar acontecendo...mais segui os passos conforme informou...

    inseri um gadget, html/javascript

    coloquei o título como "teste" e no corpo do texto coloquei exatamente como colocou aqui só troquei o local da foto.



    acesse meu blog e veja
    fotopaparazzo.blogspot.com

    como trabalho com fotos esse efeito seria o ideal para mostrar aos clientes...valeu pela atenção

    abçs
    Fabiana

    ResponderExcluir
  48. foto paparazzo

    entrei no seu blog, e vi o teste, tente colocar o código deste jeito:


    <style type="text/css">
    <!--
    #lightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}
    #lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}
    #lightbox img{ border: none; }
    #overlay img{ border: none; }
    #overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}
    * html #overlay{
    background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");}
    -->
    </style>
    <script type="text/javascript" src="http://acessoriosparablogs.com.br/scripts/lightbox.js"></script>
    <a href="http://1.bp.blogspot.com/_Rv6zp0-GA6I/TAU36iPrrjI/AAAAAAAAAqE/6FudAKEOUlM/s1600/Z%C3%83%C2%A9.JPG" rel="lightbox" title="Teste"><img src="http://1.bp.blogspot.com/_Rv6zp0-GA6I/TAU36iPrrjI/AAAAAAAAAqE/6FudAKEOUlM/s1600/Z%C3%83%C2%A9.JPG" width="177" height="132" border="0" /></a>

    ResponderExcluir
  49. karaca...perfeito...ta vendo, estava fazendo algo de errado!!!...agora tenho uma outra duvida, como que faço pra ajustar, alinhar o corpo do blog com o a foto principal de cima. E, no código acima tem como eu dar sequencia nas fotos sem precisar ficar clicando uma a uma, vou colocar um média umas 50 fotos de cada festa que fizer...tipo o site www.azullimao.com.br.Obrigada mais uma vez!

    ResponderExcluir
  50. esse código que publicamos precisa ser colocado em cada foto separadamente, não tem como navegar entre as fotos.

    já achei alguns códigos que fazem isso mas são muito complicados e cheio de detalhes por isso não publiquei.

    ResponderExcluir
  51. fABIANO NÃO CONSIGO FAZER ISSO COMO HOSPEDO A FOTO??? DETALHE SOU ANALFABETA DIGITALMENTE

    ResponderExcluir
  52. Fabiano não consegui pelo amor de Deus devo ser bem lesada rsssssss fui no image shake, hospedei a foto e mesmo assim não tive êxito, fiz o gadget java html pus o cod e não saiu

    ResponderExcluir
  53. Escola Municipal Pau Brasil
    escreva para nosso email e envie a imagem e vamos hospedar e montar o código

    ResponderExcluir
  54. cara pode me ajduar nao nao estou conseguindo de geito nem um nao aparece a imagem so o link dela como eu fasso?

    ResponderExcluir
  55. Felipe Arce
    provavelmente o problema está no endereço da imagem, envie o código como está tentando usar para o meu email e vou olhar.

    ResponderExcluir
  56. ta vou tentar aqui depois ai te falo

    ResponderExcluir
  57. Oi, Fabiano,
    Tentei de várias maneiras, mas nào consegui. Na única vez que a imagem apareceu foi quando colei o código da amostra do comentário e troquei os nomes e endereços, mas a imagem apareceu distorcida e,quando clicava pra aumentar, ela ficava enorme. Definitivamente, não entendi seu texto e gostaria que vc fizesse com mais exemplos, principalmente na questão do tamanho.
    Grata.

    ResponderExcluir
  58. Mônica Bustamante
    o efeito lightbox não distorce as imagens, não tem no código dele nada sobre tamanho de imagem.

    não tem como explicar de outro jeito é só trocar os endereços nos locais indicados no código

    ResponderExcluir
  59. Então eu devo ter errado no "imagem ou texto". Mandei o código para o seu e-mail e o teste que eu fiz na página pra vc ver o que está acontecendo.

    ResponderExcluir
  60. Oi, Fabiano, fiz o teste no meu blog e deu certo, mas a imagem não aparece no post, apenas o link. Então, eu fiz upload da imagem e o efeito lightbox desaparece.
    Pergunto: Quando vc coloca este código, a imagem tem que aparecer junto com o link?
    Agradeço a atenção.

    http://redenacional1.blogspot.com/2010/07/transplante-de-orgaos.html

    ResponderExcluir
  61. Mônica Pinheiro
    você pode usar esse código com link de texto ou mostrando uma miniatura da imagem, mas seria necessário criar duas imagens uma em tamanho natural e outra reduzida

    ResponderExcluir
  62. Não entendi. Onde vou adicionar o código da miniatura da imagem?

    ResponderExcluir
  63. Mônica Pinheiro


    onde está escrito imagem ou texto coloque <img src="http://www.blogger.com/img/b16-rounded.gif" border="0" />

    claro que usando a imagem que desejar e não esse endereço que usei como exemplo

    ResponderExcluir
  64. cara eu nao estou conseguindo fazer como notutorio quero coloca uma emagem pequena para quando click nela abre ela maio hospedei a msm emagem como vc falou e coloquei no meu site mais quando click nela vai para outra pagina quero por para quando click so a bri ela maio min ajuda porfavor

    ResponderExcluir
  65. envie o código como tentou usar no blog para meu email e vou olhar se encontro o erro

    ResponderExcluir
  66. Oi, Fabiano,
    Estou fazendo vários testes pra ver se acerto o lightbox, testando o tamanho das fotos. Em uma das vezes, deu certo, mas agora o sistema não quer publicar, dizendo que tem erro no código. Por favor, me ajude!

    Grata!

    Mandei o código para o seu e-mail.

    ResponderExcluir
  67. Mônica Bustamante, vou ver e responder o email

    ResponderExcluir
  68. Fabiano,

    Venho aqui para agradecer a ajuda que vc tem dado. Mesmo sem dar certo o lightbox, sou eternamente grata, pois não entendo nada de Javascript e construção de sites.
    Mais uma vez, obrigada de coração e desculpe pela insistência. É que não entendo como o blogspot com um sistema tão evoluído, não aceite o código.
    Bjos.

    ResponderExcluir
  69. Eu queria saber se dá para mostrar frames no lugar de imagens e se vc poderia colocar um X na direita em cima para diminuir a parte debaixo, e com esse X se fechasse a foto.

    ResponderExcluir
  70. Você se incomoda se eu usar o seu box sem créditos? Sem o "Widget Efeito LightBox"

    ResponderExcluir
  71. Oi, Fabiano! Olha eu aqui de novo!
    Resolvi testar o código na mesma imagem e DEU CERTO!
    Veja no link: http://coisasdepedralva.blogspot.com/2010/05/parabens-pedralva.html

    Tudo bem que a imagem cresce até demais, mas finalmente o sistema aceitou.
    Muito obrigada mesmo, Fabiano!
    Bjos

    ResponderExcluir
  72. Adorei, deu certinho!!
    Eu só queria saber se tem jeito de fazer isso dentro das postagens.

    ResponderExcluir
  73. quando esse código fica pronto mais ou menos?
    Obrigado

    ResponderExcluir
  74. Parabéns por desenvolver um código tão bom!

    ResponderExcluir
  75. Anônimo
    vou preparar e publicar sobre isso amanhã(domingo)

    ResponderExcluir
  76. neste código que tenho não foi possivel alterar para usar um X na parte superior para fechar, vou pesquisar algum outro e quando achar vou publicar aqui no Dicas para Blogs

    ResponderExcluir
  77. K!
    infelizmente em alguns modelos está dando erro dentro da postagem, não conseguimos corrigir isso, mas estamos procurando um outro código que faça o mesmo efeito

    ResponderExcluir
  78. Como faço para criar uma imagem semitransparente*

    ResponderExcluir
  79. precisa salvar uma imagem no formato .png, se não tiver programas para editar imagens veja aqui:Programas Gratuitos para Edição de Imagens

    ResponderExcluir
  80. Tem como tirar a propaganda?
    Mudar o "Fechar"?
    ??

    ResponderExcluir
  81. ┼░™Jø®g€™░┼
    tudo na internet é propaganda... não tem como retirar.

    ResponderExcluir
  82. Cara, vcs do dicas para blog são os mestres do blog, eu gostei mutio dessas dicas eu estou aplicando todas em meu blog, agora so estar faltando uma e gostaria de saber se não tinha como vcs me indicarem algum, é que eu quero colocar na abertura do meu blog uma vinheta, tipo aguns sites de musicas ou radio que quando a gente inicia o site, ai la diz seja bem vidos ao site tal que tem como objetivo tal, seria uma vinheta como essa que pretendo colocar no meu blog e queria q vcs me ajudassem o link do meu blog é http://uruocaonline.blogspot.com

    ResponderExcluir
  83. para faze-lo funcionar como album, basta adicionar colchetes com uma palavra na propriedade rel='lightbox[album]'

    simples assim, ai é só colocar essa mesma palavra em todos que vc queira que faça parte do album.

    para fazer 2 ou mais albuns na mesma pagina, basta mudar a palavra entre colchetes.

    meu site: www.a3internet.com.br

    abraços

    ResponderExcluir
  84. Oi eu adorei esta dica de vocês, mas eu tenho uma duvida quanto a questão de copiar. É proibido copiar os códigos que vocês dão, por exemplo o código que vocês deram hoje?

    ResponderExcluir
  85. Palmeiras
    o que proibimos é copiar nosso tutoriais, os códigos podem ser utilizados, no seu blog para altera-lo e não para publicar como um postagem

    ResponderExcluir
  86. Palmeiras
    o que proibimos é copiar nosso tutoriais, os códigos podem ser utilizados, no seu blog para altera-lo e não para publicar como um postagem

    ResponderExcluir
  87. Palmeiras
    o que proibimos é copiar nosso tutoriais, os códigos podem ser utilizados, no seu blog para altera-lo e não para publicar como um postagem

    ResponderExcluir
  88. Obrigadoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo...


    Este Site EH D++++++++++++

    Agora queria fazer um pedido: tem um efeito mais bonito naum? Queria um Istântaneo e Bonito como eesse

    ResponderExcluir
  89. esse efeito permite alguma personalizações por exemplo trocar a imagem semi transparente que cobre o resto da tela por uma textura, mudar a cor e bordas da caixa... só precisa entender um pouco de CSS

    ResponderExcluir
  90. Obrigado pela dica, seria bom mesmo se tivesse as setinhas, pra mudar de imagem, isso seria perfeito!

    ResponderExcluir
  91. olá, fiz o teste aqui e saiu tudo perfeito a nao ser por uma coisa...se eu colocar a imagem que leva um certo tempo pra carregar, deveria aparecer aquela barrinha de load nao deveria?

    aqui comigo a tela fica escura ate a imagem mais clara carregar

    ResponderExcluir
  92. Muito legal seu blog e achei bacana esse codigo,mas eu queria usar nas fotos da postagens,teria como vc fazer um codigo pra gente usar nas postagens ?

    Abração

    ResponderExcluir
  93. infelizmente esse código com o efeito light box tem que ser aplicado em cada imagem não tem como fazer automatico em todas as postagens

    ResponderExcluir
  94. Muito obrigado pela excelente dica...

    Será que dava para fazer com as setinhas do lado como se fosse galeria para passar a imagens como em algunns sites?

    ResponderExcluir
  95. Olá Roberto, bom, essa dica é muito boa, mas tem como por em todas as imagem do meu blog!
    É que estou montando uma galeria, para uma amiga minha, e adoraria se esse efeito fosse posto em todas as imagens do blog.
    Poderia me ajudar!!!
    Conto com a sua ajuda!!!

    ResponderExcluir
  96. infelizmente não tem como aplicar esse efeito automaticamente em todas as paginas

    ResponderExcluir
  97. tem como colocar na imagem da postagem ????

    ResponderExcluir
  98. pode usar esse código nas imagens das postagens mas tem que adicionar uma por vez... não tem como ser automatico

    ResponderExcluir
  99. Eu não paro de perguntar, rsrsrs...

    Antes de tudo obrigado por responder meu comentario no outro post.

    Postagem otima. Mas a pergunta é:

    Existe uma maneira de na postagem eu fazer esse efeito por exemplo: a forma que quero usar é a seguinte na postagem quero ter 4 fotos um do lado da outra.

    Mas quero colocar essas quatro fotos uma do lado da outra com tamanho diminuido e quando clico em alguma delas aparece ela com tamanho original com esse efeito?

    Obs.: Não quero ter links na imagem ou texto mostrando quando passa o mouse.

    ResponderExcluir
  100. neste código não é possivel usar mais de uma imagem por vez...

    mas você poderia criar uma imagem só... ou aplicar o código em imagens separadas

    ResponderExcluir
  101. Eu já utilizava uma ligthbox muito mais complicada que essa, mas curti pacas esse formato mais simples. Thanks!

    uma detalhe... o script está hospedado em sua conta certo? há possibilidade de quebrar com grande fluxo de uso? teria como disponibilizar uma cópia para hospedarmos separadamente?

    ResponderExcluir
  102. se utilizar hospedagem gratis é possivel que tenha problemas se utilizar muito ou fornecer para outras pessoas...

    ResponderExcluir
  103. Então não tem como vc disponibilizar o script para nós hospedarmos em nossa conta assim como vc disponibilizou a imagem escura do fundo?

    ResponderExcluir
  104. é uma imagem png normal a maioria dos programas para editar imagens faz

    ResponderExcluir
  105. Fabiano, não funcionou no meu blog: http://netcina.blogspot.com/ Entrei na pagina layout, adicionar gadget, html/javascript e insiri o código. MAS PERGUNTO: em qual posição deve ficar o “gadget”???. Deixei-o logo em cima do meu perfil, e lá ficou escrito a legenda que escrevo no “>imagem ou texto<” ... Então se clico nela, funciona e aparece a foto beleza. O que estou fazendo de errado? Quando clico na foto não funciona. Grato, sou novo no seu blog e estou seguindo a pouco tempo.

    ResponderExcluir
  106. Luiz Fernando Lopes
    deve ser algum detalhe na hora de alterar os códigos, as vezes uma aspas faltando... ou qualquer outro sinal

    ResponderExcluir
  107. Oi fabiano!

    Eu reparei que esse codigo da para "Ligar e Desligar as Luzes" do blog. Mas eu queria criar 1 blog de mangas e teria de ter uma sequencia de imagens com umas setas para passar á próxima imagem, mas eu queria imagens em destaque que ocupassem quase toda a pagina. Poderia dizer-me como fazer isso??

    MSN: alexisvnc@hotmail.com


    Obrigado!

    ResponderExcluir
  108. Alexis
    não tenho esse código com sequencia de fotos

    ResponderExcluir
  109. Cara, é possível modificar o código para que se abra vídeos do youtube no light box?

    ResponderExcluir
  110. esse código é somente para imagens não dá para utilizar em videos porque os códigos são diferentes

    ResponderExcluir
  111. Não consegui Fabiano.Coloco o endereço correto no lugar indicado e nada!!!

    ResponderExcluir
  112. nesta linha que coloca a imagem

    < a href="imagem em destaque" rel="lightbox" title="minha legenda">imagem ou texto</a >

    ResponderExcluir
  113. FABIANO... USEI SUA DICA http://www.dicasparablogs.com.br/2009/05/links-lado-lado-menu-horizontal.html , UNS CÓDIGOS LIGHTBOX NAS PRÓPRIAS IMAGENS , OUTROS CÓDIGOS NUM GADGETS INVISÍVEL QUE BUSQUEI EM OUTRO SITE E VEJA QUE LINDO FICOU!!!
    MAS, SÓ FUNCIONA ESSE EFEITO SE ESTIVER USANDO A DICA DESSE LINK
    http://www.dicasparablogs.com.br/2009/10/mostrar-resumo-da-postagem.html
    BRIGADIM MEU FILHO MAIS UMA VEZ!!!

    ResponderExcluir
  114. tem como modificar os detalhes sem dificuldades

    ResponderExcluir
  115. @Anônimo o jeito de alterar é mexendo no CSS que está no começo do código

    ightbox{background-color:#eee;padding: 10px;border: 2px solid #000000;}
    #lightboxCaption{font-size: 0.8em;padding-top: 0.4em;}
    #lightbox img{ border: none; }
    #overlay img{ border: none; }
    #overlay{background-image: url(http://img534.imageshack.us/img534/6039/overlayo.png);}
    * html #overlay{
    background-color: #333;background-color: transparent;background-image: url(http://img43.imageshack.us/img43/3623/fundomg.gif);filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="http://img179.imageshack.us/img179/5197/loading.gif", sizingMethod="scale");}

    mas depende o que você deseja alterar precisará entender de CSS

    ResponderExcluir
  116. Sua dica "Fazer o efeito LightBox - Imagens em Destaque
    " foi ótima: simples e eficiente. Gostaria apenas de pedir uma coisa: é possível retirar "Widget Efeito LightBox"?

    ResponderExcluir
  117. entre na pagina modelo e lá tem o botão personalizar e outro botão para editar html

    ResponderExcluir
  118. estou com uma pagina de imagem mais quando clica no imagem ela é ampliada agora por tras do site ex http://muitomaisgrafica2.blogspot.com.br/2014/02/pastas-personalizadas.html , teria como corrigir ? isso

    ResponderExcluir
  119. Abina o seu template é personalizado... seria necessário fazer testes até achar onde está o erro

    ResponderExcluir
  120. já fiz de tudo !! e nada, se lhe envia o arquivo xml daria uma olhada para me ?

    ResponderExcluir
  121. varias pessoas pedem para resolver problemas com o template e não seria possível atender a todos

    além disso seria necessário testar o template instalado.

    acho que no seu caso seria melhor desativar o lightbox

    ResponderExcluir
    Respostas
    1. infelizmente vou ter que desativar mesmo, mas mesmo assim valleu Fabiano parabéns pelo trabalho .. tudo de bom !!!

      Excluir