Skip to content

Conflito javascript entre carrossel (usa jquery) e plugin content-gallery (usa mootools)

dezembro 12, 2008

Esta @#%$@ me tomou quase 1 dia completo de trabalho.

Usar num template um carroussel de imagens  junto com um slide-show, sendo que o carrossel usa JQuery e o slide-show usa mootools não foi nada simples. Estes dois frameworks javascripts tem pequenos conflitos em relação a “palavras reservadas”.  Devido aos conflitos, não consiguia fazer os dois funcionarem ao mesmo tempo de jeito nenhum.

Demorei a encontrar uma solução primeiro porque nem sabia o que estava por baixo, pois estava apenas usando um plugin e pegando código de um template, depois pq nunca mechi com mootools e conheço pouco de JQuery, e por fim porque não há muita informação sobre este problema na web. Bom… 24horas depois… a solução foi encontrada.

SOLUÇÃO: Basta usar jQuery.noConflict(); nos locais em que ocorrem os erros (os locais JQuery).

Vai dar erro nas funcionalidades que usam funções, variáveis de script que foram carregados primeiro, pois os arquivos que são carregados em seguida sobrescrevem algumas coisitas dos primeiros.

Como a solução foi dada pela galera JQuery (obrigado a eles), tenho que deixar o mootools para carregar por último e corrigir os conflitos no meu código que usa o JQuery.

Exemplo onde ocorria um erro:

$(function() {

$(‘#slides a’).tooltip({
track: true,
delay: 0,
showURL: false,
extraClass: “slides”
});

para resolver o erro fiz o seguinte

var $j = jQuery.noConflict();
$j(function() {

$j(‘#slides a’).tooltip({
track: true,
delay: 0,
showURL: false,
extraClass: “slides”
});

Obs.: Pelo que li o pessoal do mootoos é meio fresco e não se importa(ou não se importava na hora de usar nomes já usados por outros frameworks).

Uma forma de fazer o Content Gallery carregar scripts por último seus é, em content-gallery.php,

trocar:
add_action(‘wp_head’, ‘gallery_styles’);

por

add_action(‘wp_head’, ‘gallery_styles’,’99’);

99 é um número alto qualquer

======================================

lembrando que, no meu caso, sempre que eu atualizar vai dar erro no arquivo jd.gallery.js.php

pois este usa <?= $variavel ?> para dar echo

o que não funciona com meu PHP

tive que substituir os <?= por <?php echo

Anúncios
9 Comentários leave one →
  1. Mari permalink
    março 2, 2009 11:33 pm

    Oiii, Obrigada pelo post!!!

    Por favor eu estou usando um carousel no wordpress e gostaria de usar o FCS junto…onde devo fazer estas alterações? No header.php ou no index.php??

    Grata

  2. março 2, 2009 11:53 pm

    oiii, disponha!

    infelizmente não vou poder ajudar muito… nunca usei o FCS ( vi agora no google o que era, na verdade )

    Bom, se o problema é o mesmo, ou seja, o FCS é baseado em JQuery. O que eu faria é o seguinte:
    Colocaria o FCS pra carregar por último.
    No meu caso, foi assim.

    Isto carrega o carrossel:
    ” ?php $aOptions = RevolutionOffice::initOptions(false); ? ”

    e isto carrega os Slides (Featured Content Gallery):
    ” ?php include (ABSPATH . ‘/wp-content/plugins/content-gallery/gallery.php’); ? ”

    pra carregar o FCG por último é só colocar o segundo php depois.

    Ao fazer isto, o carrossel deixava de funcionar. Pra resolver, eu, usando o firebug(firefox), localizei os locais no javascript onde os erros aconteciam e redefini estas funções no final do header usando jQuery.noConflict();

    Não sei vai funcionar pra vc, mas foi o que fiz.
    Vc terá que colocar o código que inicializa o FCS por último e depois checar onde dá erro no carrossel e remover estes erros usando jQuery.noConflict(); (isto se o problema for de conflito mootols jquery, claro)

    Abraços!

  3. Jonatha permalink
    abril 23, 2009 6:37 pm

    Oi Vinicius! Estava apanhando com isso ai que voce passou nesse post, até achar esse tópico teu…
    Funcionou uma beleza no Firefox. Mas no IEca continuou dando conflito. Não aconteceu isso contigo?

  4. abril 23, 2009 6:41 pm

    Pra falar a verdade, se for IE6 eu nem sei, pois ignoro ele.

    IE7+ funcionou normal.

  5. julho 26, 2009 7:28 pm

    Cara, essa linha salvou meu dia. Tava quase passando o projeto pra dinâmico com PHP, mas foi só usar essa linha e carregar o mootools no loca certo no código e ficou resolvido. Quando eu terminar mando o exemplo. Abraço.

  6. outubro 30, 2009 2:11 am

    Cara, te amo, resolveu minha vida… xD

  7. outubro 30, 2009 2:17 am

    Bom saber que ajudei algumas pessoas 🙂

  8. juan permalink
    setembro 19, 2011 3:55 am

    Cara, o post já foi publicado há muito tempo, mas não posso deixar de agradecer… eu estava com um conflito entre um plugin de um menu e de um slide, mas graças ao post, a questão nem durou 10 min.

    Muito Obrigado!

  9. outubro 15, 2012 1:06 pm

    Brother, vlw msm, resolveu todos os meus problemas

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: