2011-11-13 8 views
1

私はIan Lunn's interactive mapをwordpressに埋め込んでいます。

スクリプトはstandalone pageで完全に機能しますが、wordpressに読み込まれるとスクリプトは何もしません。私はいろいろなソリューションを試しました.jQueryをさまざまな方法でロードしています(functions.php、インライン、ヘッダーとフッター).jQueryの以前のバージョンにダウングレードし、関数の名前空間を指定します。何も起こりません、火か虫は何のエラーも何も表示しません。

私はこの段階で完全に迷っており、提供されたヘルプは非常に高く評価されます。ここ

の作業のデモ:http://www.ianlunn.co.uk/demos/bbc-news-jquery-map/ Githubのソース:答え

それはドル記号はPrototypeライブラリーのためのワードプレスで予約されていることを蒸散した後https://github.com/IanLunn/BBC-News-jQuery-Map

//更新、なぜそれエラー出であります'$は関数ではありません' - 以下の受け入れられた答えはこれを指摘していますが、コメント内のみであり、したがって分かりやすくするための更新です。例: -

$().ready(function() { 
    $("#select_me").show(); 
}); 

jQuery().ready(function() { 
    jQuery("#select_me").show(); 
}); 
+1

ただ詳細については:ワードプレスでは、jQueryのライブラリは[noConflictモード](http://api.jquery.com/jQuery.noConflictにロードされています/)。このため、jQuery関数は '$()'ではなく 'jQuery()'を追加する必要があります。このような関数の中で、 '$()'は再び働きます。私。あなたの例では '$("#select_me ")。show();'は最も外側のラッパーが 'jQuery()'で始まっている限り有効です。 –

答えて

3

私はあなたのページに行くと、2つのエラーがFirebugコンソールに表示されます。

最初にされています。そして、私が見

document.getElementById("recaptcha-submit-btn-area") is null 
/about/...ve-map/ (line 595) 

XML can't be the whole program. 
?> map.js?ver3.2.1 (line 55) 

秒です

carouFredSel: No element selected. 
jquery...r=1.4.2 (line 14) 

あなたはこの出力が表示されませんか?

編集:map.jsにはPHPタグで囲まれたコードがありますが、それは問題です。 Javascriptファイルでクライアントに渡されるPHPコードです。

+1

bbcのmap.jsファイルのコードをFirebugコンソールで実行してみました(jQueryを$と参照しているクロージャーでラップしなければなりませんでした。その後、半分作業した...地図はアニメートされませんでしたが、地図のある領域を眺めたとき、リスト内の正しい項目が強調表示されていました。 – dnuttle

+0

map.jsファイルをfunctions.phpで上書きした問題を修正したら、wordpressが$を予約していることが明らかになりました - あなたの助けに感謝します! – toomanyairmiles

1

は、あなたがロードしているスクリプトファイルを見てみましょう:

http://mjw.view-wireframes.com/jquery-map/map.js

Wordpressのではなく、.jsファイルよりも、PHPファイルを吐き出しています。私。 WPが提供されているか、Javascriptファイルを含めているかのように問題があるようです。

3

これは既に答えられていることは分かっていますが、これは私がこれを学んだやり方であり、基本的に同じ答えですが、他の人がソリューションをコピー/貼り付けできるように助けるかもしれません。

基本的にはこの関数内のすべてのjQueryをラップ:

jQuery(document).ready(function($) { 

    /* Put your jQuery functions here, 
     no need to change the $ to jQuery. */ 


});