sexta-feira, 15 de julho de 2011

jQuery.noConflict()

Hoje eu estava tentando usar o JQuery Nivo Slider junto com VideoBox, tipo um lightbox pra vídeos do youtube, http://videobox-lb.sourceforge.net/ mas o troço nao funcionava de jeito nenhum.

Foi então que o Taturana me apresentou o jQuery.noConflict()

Ocorre que, se vou utilizar dois jquerys na mesma página, preciso definir para um deles, uma variável diferente de $ que é o padrão. Então, resolvi criando o $a . Simples.

No exemplo abaixo, basta definir uma váriavel diferente de $ para o JQuery,

ANTES:
 <script type="text/javascript">
  $(window).load(function() {
                $a('#slider').nivoSlider();
            });
  </script>

DEPOIS:
 <script type="text/javascript">

   var $a = jQuery.noConflict()  // Isto serve pro slider nao dar dar conflito com o videobox
           
   $a(window).load(function() {
                $a('#slider').nivoSlider();
            });
            </script>



Lembrando que também precisei alterar o z-index do videobox lá no css dele.
Coloquei 900 na sombra e 901 na janela e nao deu mais erro.

sexta-feira, 1 de julho de 2011

Mais um Erro com JQuery LightBox (Janela Modal)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

 <!-- #OPA! Cuidado, Essa URL aí da tag DOCTYPE impede o funcionamendo do JQuery LightBox -->

Isso leva a crer que o JQuery LightBox não foi feito dentro dos novos padrões do HTML4.
O problema é que se eu retiro essa url da tag, alguns CSS de centralização simplesmente não funcionam.


Resolvido!

Minha versão do Lightbox era 2.04.

Entrei no site oficial e vi uma atualização para a versão 2.05 que tem a correção para este bug.
http://www.huddletogether.com/projects/lightbox2/#download

Atenção para não ter nenhuma div com z-index maior que 90 (que é a z-index da div "overlay" do Lightbox), para não ficar por cima dele.