28ago Jquery e Mootools – A Solução para o Conflito

Como vocês já devem saber, o Mix Total agora está no Wordpress. Estou curtindo demais a plataforma e as infinidades de possibilidades de personalização.

Em busca de deixar o novo template o mais parecido com o 3.0 do Blogger, instalei o plugin Content Gallery. Esta Galeria utiliza o framework Mootools.

Procurando por um bom plugin de “Social Bookmarking” achei o “UmbigoThis” criado pelo Lenon do blog Techlive. Esse plugin é ótimo, porém ele utiliza o JQuery, outro framework, como o Mootools. Ao instalar o UmbigoThis, a minha galeria de imagens simplesmente parou de funcionar. Procurando pela solução descobri que realmente há um conflito quando os dois trabalham juntos.

E agora? O que fazer?

O Lenon prometeu que na versão 0.5 de seu plugin ele consertará isto, mas eu pesquisei, futuquei e encontrei a solução. De qualquer forma, apenas mexer no Jquery não resolve o problema, é preciso acertar algumas coisas no Mootools.

Vamos para o que interessa!

O que acontece com o Mootools é que sua nova versão 1.1 teve uma mudança dos eventos para $events, criando um conflito com o Jquery que utiliza o mesmo evento expando. A solução é bem simples! Basta você renomear o $events. Explico a seguir:

O plugin Content Gallery vem com a versão compactada e descompactada do Mootools dentro da pasta script. Para fazermos a mudança é preciso usar a versão descompactada. Então abra o Mootools no Dreamweaver ou até mesmo no bloco de notas e substitua todas as ocorrências $events para $events2. Salve o Mootools descompactado mas não se esqueça de deixar nomeado como “mootools.v1.11“.

Você irá perceber que seu arquivo ficará com aproximadamente com 149 Kb, o que é um tamanho muito grande. Então vá em Packer JavaScript en PHP e faça a compactação do seu javascript e perceba a diferença. De 149kb ele ficará com 35Kb. Salve novamente seu Mootools já compactado e substitua na pasta script do plugin Content Gallery.

O procedimento com o Jquery é bem mais simples. Pode parecer uma gambiarra, mas acreditem, deu certo! O arquivo Jquery que vem no plugin UmbigoThis já está compactado, mas simplesmente adicione o seguinte comando no final do código do mesmo:

jQuery.noConflict();

Salve e substitua dentro da pasta do plugin.

Se você seguiu os passos certinho, com certeza agora sua galeria em Mootools irá funcionar perfeitamente em paz com o Jquery do UmbigoThis.

Editado em 29 de agosto de 2008:

O Lenon já publicou a nova versão do plugin, o UmbigoThis 0.5. Agora é possível optar por não usar os efeitos de janela popup, podendo desabilitar o Jquery. Caso você prefira usar da maneira como está aqui no Mix Total, não é preciso usar o hack acima.

Qualquer dúvida é só comentar!

Artigo consultado: Jquery, Mootools e múltiplos uploads