JavaScriptの「Uncaught TypeError: $(...).ready is not a function」を解決するにはどうすればよいでしょうか？

Question

Bootstrapでギャラリー機能をつくるために「bootstrap-photo-gallery」を利用して作ることにしましたが、
必要なファイルを読み込んでいくと以下のようなエラーがでました。どうしたらエラーを解消できるでしょうか？

Uncaught TypeError: $(...).ready is not a function

エラーがでたJSの内容は以下の通りです。

    $(document).ready(function(){
        $('ul.first').bsPhotoGallery({
          "classes" : "col-lg-2 col-md-4 col-sm-3 col-xs-4 col-xxs-12",
          "hasModal" : true,
          // "fullHeight" : false
        });
      });

エラーが出たページのリンク
※他のCSSの影響でレイアウトが崩れています

うまくいけば以下のリンクのように画像がクリッカブルになり写真が拡大されます。
デモサイトのリンク

Answer 1

コンフリクト除けしてますね。
$でjQueryを使ってるところを、全部$jに書きかえるか、

(function($) {

}(jQuery));

でラップしてみてください。

Comments

[maisumakun]

最初を jQuery(function($){ と、引数で取らせることでも解決できますね。

[h-o]

返信をいただき誠にありがとうございます。
上記の方法でコンフリクトを解消できました。

Answer 2

提示のコードである$(document).readyで始まるコードはjQueryのコードですので、このコードを書くより前にjQuery本体を読み込む必要があります。

とりあえず、1系列（IE8以上に対応）であれば<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>のように、Google CDNから参照させるのが手早いです。

Comments

[h-o]

返信をいただき誠にありがとうございます。

＞提示のコードである$(document).readyで始まるコードはjQueryのコードですので、このコードを書くより前にjQuery本体を読み込む必要があります。
以下のjqueryをheadでよみこんでいますがうまくいきません。
<script type="text/javascript" src="http://wonect.com/js/lib/jquery/jquery-1.10.2.min.js"></script>