Lightbox no Internet Explorer – Resolvido

A galeria Lightbox 2, desenvolvida em Jquery, trás a possibilidade de belos efeitos visuais com imagens em vídeos, porém, apresenta problemas de imcompatibilidade com o IE. Um deles é quando a imagem é aberta, mostra o fundo pela metade. Aprenda aqui a como resolver este problema.

Assim que começei a mexer com lightbox, me encantei com as possibilidades que eu poderia fazer, mas logo percebi o problema com o IE 6, 7, 8 e 9. Apesar de procurar muito no google, não encontrei nada que resolvesse. Então, decidi parar de chorar e resolver eu mesmo, e consegui. Muitos na internet reclamam que o lightbox quando ativado no IE, mostra apenas metade do fundo escuro, ficando com a cor da página na metade de baixo, como a imagem a seguir:

Resolvendo o problema

O que eu fiz, foi alterar o arquivo .css responsável por mostrar o fundo escuro, pois tinha alguns códigos defeituosos:

No lightbox versão 0.5
altere o conteúdo do estilo #jquery-overlay para:

position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
min-height:100%;


No lightbox versão 2

altere o conteúdo do estilo #overlay para:

position: fixed;
top: 0;
left: 0;
z-index: 90;
width: 100%;
height: 100%;
min-height:100%;
background-color: #000;

O resultado então é apresentado agora:

Agora é so aproveitar esta maravilhosa galeria! Deu certo com você, poste um comentário e divulgue para nós (:

Lucas Peperaio

Lucas Peperaio

Estudante de Ciência da Computação, trabalho com desenvolvimento web há 5 anos e com hardware há 8. Nas horas vagas, sou entusiasta de Overclock, Casemod e Benchmarks, além é claro dos Games. Apaixonado por informática e pela vida, procuro compartilhar meus conhecimentos e assim, ajudar as pessoas. Siga-me no youtube, posto semanalmente muito material sobre Hardware, tecnologia e games em geral: Clique aqui

Receba gratuitamente em seu E-mail
Novos artigos do meu Blog!


Após o Cadastro você receberá um Email Automático. Clique no link enviado para Ativar e receber as novidades.

Categorias do site





15 Comentários Deixe o seu

  1. Alexandre

    Lucas,

    Parabéns pelo excelente conteúdo, não sabia que o problema era tão simples de resolver, claro que depois de vocês quebrar a cabeça e passar tudo mastigado para nós!

    Novamente parabéns e você não sabe o quanto você me ajudou.

    Abs

    Alexandre

    • Lucas Peperaio

      Obrigado colega, foi quebrando a cabeça e muito irritado com o explorer que desenvolvi esta simples solução. Que bom que deu certo contigo!

  2. luciana

    Ola coloquei um lightbox2 no ieca 9 porem o mesmo esta abrindo em uma nova janela e não na mesa de luz, alguem ja passou pelo mesmo problema e poderia dar um help.

    obrigada

  3. Lucas Peperaio

    Eu testei no Internet Explorer 9 o ligthbox versão 0.5 e 2 e funcionou certinho, claro, após a alteração do plug-in com as minhas dicas ai em cima. Você fez isso luciana?

  4. luciana

    Lucas fiz as alterações sim mas no IE 9 continua da mesma forma ao ives da imagem maior abrir na mesa ela abre em outra janela.

    • Lucas Peperaio

      Eu testei aqui no Internet Explorer 9 e funcionou perfeitamente. Mande para mim o seu código-fonte através da página de contato do meu site, para eu dar uma olhada pra você

  5. Valdne filho

    Cara muito show me ajudo muito isso comsegui resolver em partes meu problema so q agora parou de cortar pela metade o lightbox porem ficou no canto direito uma parte em branco no cobrindo os 100% da tela.

    coloquei aqui pra dar uma olhada http://www.sygecom.com.br

    • Lucas Peperaio

      Não encontrei no seu site alguma imagem com lightbox para testar, mas acredito que exista no seu código css ou html algum problema. Seja mais claro, em qual página não está funcionando?

  6. Felipe

    Eu te amo… Obrigado

  7. Marcos

    Olá lucas, muito boa sua dica, porém mesmo após ter aplicado ela, continuo dando um erro. Verticalmente resolveu o problema mas horizontalmente não, ou seja, a layer escura ainda não ia até o final do lado direito do monitor(uso um widscreen(1366*768) . Bem , então olhei o código e vi que tinha um min-height:100% achei por bem adicionar min-width:100% e resoveu o problema.

    Abraço!!

    • Lucas Peperaio

      Agradeço também pela colaboração do min-width:100%
      valeu

  8. fabio

    opa blz lucas seguinte to com problemas pra centralizar e e no lightbox mais é so no ie no firefox tah otimo agradeço a colaboração vlw obrigado té mais

  9. Aline

    Perfeito! Excelente dica! Estava tentando resolver esse problema a alguns dias e nada! Obrigada!

  10. Robson Martins

    Muito Obrigado Lucas! Sua dica foi muito valiosa. Muito bacana o teu trabalho no Blog Grande Abraço!

  11. Denise

    Valeu o post!!! O conteúdo está muito bem explicado e resolveu o problema do lightbox na hora!

    Parabéns!