IE/Fire foxでは問題なかったが、chromeでは「$ is not defined」とエラーが出てしまう

###前提・実現したいこと
colorboxを動作させたい。

###発生している問題・エラーメッセージ
ローカル・テストサーバーでは正常に動作しているcolorboxが
本サイトではエラーになってしまい動作しません。

chromeのデベロッパーツールでは下記のエラーが出ています。

Uncaught ReferenceError: $ is not defined.

###該当のソースコード

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta charset="UTF-8">
<title>テスト</title>
<script src="../lib/jquery-1.5.2.min.js"></script>
<script src="../lib/jquery.colorbox-min.js"></script>
<link rel="stylesheet" href="html5reset-1.6.1.css" />
<link rel="stylesheet" href="sumaho.css" />
<link rel="stylesheet" href="colorbox/sougi1/colorbox.css" />
<!--以下の部分でエラーが発生しています-->
<script>
$(document).ready(function(){
    $(".tejun").colorbox({
    maxWidth:"90%",
    maxHeight:"90%",
    opacity: 0.7
  });
});
</script>
<!--エラーここまで-->
</head>
<body>

###試したこと
解決法をネットで探し幾つか実行してみました。
・順番を入れ替える
・パスを確認する
・外部ファイルで読み込ませてみる

###補足情報(言語/FW/ツール等のバージョンなど)
このwebサイトの特徴
.htaccessで振り分けを行っています。PC、タブレットは通常サイトへ、スマートフォンはspフォルダ内に設けたスマホサイトを表示しています。

＜追加補足＞
IEの最新版とFireFoxでは正しく動作しています。
chromeではwin/mac共にダメでした。

行動規範の内容に同意します

回答3件

ベストアンサー

$ が別のものに破棄されている可能性。

JavaScript
1// $(document)
2// ↓
3JQuery(document)

多分試されているとは思いますが、外部から直接呼出しできます。

HTML
1<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

外部がもしいけるのであれば、.htaccess の問題の可能性が高いと思います。

投稿2016/04/25 08:26

kei344

総合スコア69398

KeitaSatou

2016/04/25 08:45

>kei344さんご回答ありがとうございます。記述頂いた形で試してみました。動作は出来なかったのですが、エラーの内容が下記のように変わりました。 Uncaught TypeError: jQuery(...).colorbox is not a function エラー名でググってみたところ、WordPressで起こる症状に似てるようでした。こちら同サーバー内にWordPressをインストールしているのですがその影響の可能性もあるのでしょうか。考えていなかった可能性が出て良かったです。ありがとうございます。

kei344

2016/04/25 09:07

外部呼出しからにして問題がなくなるということは、パスの問題ですね。「../lib/j」になっているところをhttpで始まるフルパスで記述されてみてはどうでしょう。

KeitaSatou

2016/04/25 09:46

お世話になります。 jQueryと下記の部分の２カ所をフルパスで記述してみました。 <script src="../lib/jquery.colorbox-min.js"> ↓ <script src="http://www.◯◯○.jp/lib/jquery.colorbox-min.js"></script> 今回も動作しなかったのですが、エラーの内容が戻りました。「Uncaught ReferenceError: jQuery is not defined」

kei344

2016/04/25 10:16

http://www.◯◯○.jp/lib/jquery.colorbox-min.js にブラウザでアクセスできますか？多分ですが、アクセスできなくなっているのではないでしょうか。

行動規範の内容に同意します

JQueryのヴァージョンをもう少し新しいものに替えてみたらどうでしょう？

投稿2016/04/25 07:52

退会済みユーザー

総合スコア0

KeitaSatou

2016/04/25 08:09

>Sora-tanさんアドバイスありがとうございます。上位バージョン３つを試してみました。 ver2.2.2,　ver1.12.2,　ver1.6.2.min 残念ながら、どれも動作には至りませんでした。また何かアイデアあれば、どうかお願い致します。

退会済みユーザー

2016/04/25 11:00

こちらのページにwordpressで同じ事象の原因と対策を見つけましたけど http://did2memo.net/2013/09/19/wordpress-uncaught-reference-error-jquery-is-not-defined-autoptimize/ 最終的な解決には至っておられないようですね...

行動規範の内容に同意します

colorboxが正しく動作しない原因は別ファイルにありました。
トップページをphpファイルにして、別サイトのWordPress新着情報を読み込んでいるのですが、そちらで多数のエラーが発生していました。
今回はそのエラーの影響だったようです。
未だ解決には至りませんが、ひとまず質問を閉め切らせて頂きます。
ご回答頂いた皆様、閲覧頂いた皆様、どうもありがとうございました。

投稿2016/04/26 01:36

KeitaSatou

総合スコア7