「Uncaught TypeError: $(…).fancybox is not a function」が出た時の対処方法。

f:id:yuki_2021:20171130232713j:plain:w300

明日から１２月だけどなんか暑い。バスでじっとりと汗をかく。だって沖縄は現在、最高気温２７度とかあるんだぞ？　温度が高い時と低い時で高低差がありすぎる。最近１０度近く差がある。長袖にした途端、最高気温が２５度以上まで上がるんだもんなぁ。やってられんわ。

さて、今日は技術ネタ。仕事でjqueryライブラリの依存関係でハマってね。同じトラブルで困っている人もいるかもしれないのでメモしておこう。まぁ、プログラマってのはこういうトラブルの解決方法とかの情報はネットで共有するのが基本だ。僕のブログも最初はtechブログとして開設された。最近はなんでもありありの雑記ブログとして更新されているが、過去に書かれた技術情報にはGoogleからのアクセスが絶えない。僕だって困った時に検索して答えに辿りついて助けられているので、こういうのはお互い様の意味で情報共有はしている。

さて、表題で書いてある通りfancyboxのエラーについて書かせてもらう。fancyboxってライブラリはlightboxみたいな形式でwebページを表示できるjqueryライブラリだ。wordpressのpluginなどで使われている事も多いので気づかぬうちに使っている人も多いだろう。

Fancybox - Fancy jQuery lightbox alternative

お仕事でこいつを使った処理を作りたいので触っていたんだけど、読み込みの時に「Uncaught TypeError: $(…).fancybox is not a function」が出て、うんともすんとも言わなくてな。随分時間突っ込んじゃって手こずった。

あ、まず、率直に答えだけ書いとくと、funcybox1.3.4はjquery1.10.xで動かないから発生しているバグです。jqueryの1.9.0で廃止した関数を使用してたっぽいです。古いjqueryの補完をするjquery-migrateを追加で読み込むと正常に動くようになります。

javascript.webcreativepark.net

<script src="http://code.jquery.com/jquery-migrate-1.0.0.js"></script>

これでエラーは出なくなって読み込めるようになるかと。

あとは色々と補足情報。fancyboxのエラーに関してはこれで良いんだけどjqueryを使っていて「Uncaught TypeError:（ファンクション名) is not a function」が出てきた場合は大抵の場合バージョンの違うjqueryの競合が起きている。wordpressなんかで素人が下手にheader.phpやfunction.phpなんぞを弄ると発生するエラーだ。そちらの解決方法も書いておこう。

基本的にはソースを上から下まで全部読んでjqueryの読み込みを一つに直せというのが最適解。

qiita.com

複数のバージョンのjqueryを共存させる方法もある。

qiita.com

こんな感じ。

<script type="text/javascript" src="jquery-2.0.3.min.js">
</script>
<script type="text/javascript" src="jquery-1.4.3.min.js.">
</script>
<script type="text/javascript">    
    var $143 = $.noConflict(true);
    
    (function($){
        $(function(){
            console.info("jQuery = " + $.fn.jquery);
        });
    })(jQuery);
 
    (function($){
        $(function(){
            console.info("$143 = " + $.fn.jquery);
        });
    })($143);
</script>