• ベストアンサー
  • すぐに回答を!

jQueryプラグイン、サーバー上だと動かない。

こんにちは。 このたび制作しているWEBサイトにjQueryプラグインのprettyphotoを実装したいのですが、ローカルの環境では問題なく動いてくれるのですが、サーバーにアップしたとたんにエラーがでてしまいまったく動いてくれません。 <head>内のスクリプトの記述は <script src="js/libs/modernizr-2.0.6.min.js"></script> <script src="js/prettyphoto/js/jquery-1.6.1.min.js"></script> <script src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); </script> という感じです。 ※そのほか直前にprettyphotoのCSSは読み込んでおります サーバーにアップしたページのソースをみてみるとCan't find variable:$というメッセージがでていたのでプラグインの記述を (function($){ // $(document).ready(function(){ $("a[rel^='prettyPhoto']").prettyPhoto({theme:'light_rounded'}); }); }(jQuery)); // にしてみてもCan't find variable:jQueryというメッセージがでてきてしまいます。 こちらもともとテンプレートであったサイトを改変しているものなので、このほかHTML後半部分にもいろいろjavascriptの記述があります。以下となります。 <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/jquery.easing.compatibility.js"></script> <script type="text/javascript" src="js/jquery.validate.pack.js"></script> <script type="text/javascript" src="js/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript" src="js/jquery.tweet.js"></script> <!-- super fish js include --> <script type="text/javascript" src="js/superfish/js/superfish.js"></script> <script type="text/javascript" src="js/superfish/js/hoverIntent.js"></script> <script defer src="js/plugins.js"></script> <script defer src="js/script.js"></script> レイアウトが崩れないようひとつひとつとりはずしてみたのですがprettyphotoは動いてくれませんでした。 またパスが間違っていないかも何度もチェックはしたつもりです。 本当に困っているのですが、このような時どうやって原因を探していけばよいのか、何かアドバイスを いただけたらと思い投稿させていただきました。 当方、WEB制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。 どうぞよろしくおねがいします。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数2980
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1
  • fujillin
  • ベストアンサー率61% (1594/2576)

なんだかjqueryが読み込まれていないように思えますが、まずはそのあたりをチェックしてみてはどうでしょうか? 読み込んだところで、  alert($); とでもしてみればわかるかと。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ご回答ありがとうございます。さきほど自己解決しました。 ご指摘のとおりjqueryが読み込まれていなかったようです。 jqueryを格納しているフォルダのスペルが”prettyphoto”と"prettyPhoto"と混同してしまい、サーバー上のソースをいろいろ書き換えているうちに起きた凡ミスでした。 ひとつ学習しました!どうもありがとうございました!

関連するQ&A

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか? エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • 同HTML内で複数のjQueryを設置する方法

    Movable Type5で作製しています。 複数のjQueryを使用し、(A)はヘッダーにメニュー、(B)はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとBのみが作動する状態です。 jQueryもjsもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません(同様の質問なのかも不明ですが・・・) 本当にわからないので、宜しくお願いします。

  • 複数jQueryの配置で干渉 設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 1サイト目(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 2サイト目(HTML head内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の2サイトを合体させた:(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 (HTML header内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> (HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか?

  • jQuery prettyPhoto 設置について

    jQuery prettyPhoto 設置についてド初級の質問ですが、よろしくお願いします。 http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ を設置するのに、ヘッダーに <script src="js/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" /> と記述すると別サイトで見ましたが、文字コードshift_jis で作られたサイトでは正しく作動しないのでしょうか? (実際設置しましたがダメでした。) お分かりの方いましたら、ご回答ください!

  • JQUERYをはじめて導入したのですが、

    JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている?為なのか; validate関連を導入した事があるからいらっしゃれば、 ご教授願います。

  • 複数のjQueryを使用するときの記述の仕方

    今、こちらのjQueryと http://jsajax.com/Articles/jQueryLavaLamp3/1083 こちらのjQueryを http://www.css-lecture.com/log/javascript/039.html 同じページ内で使用しようとしています。 記述は以下の通りです。 ---------------------------------------------------- <!-- ▼前者のjs --> <script src="js/jquery-1.2.6.js" type="text/javascript"></script> <script src="js/jquery.easing.min.js" type="text/javascript"></script> <script src="js/jquery.lavalamp.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#lavaLamp").lavaLamp({ fx: "backout", speed: 700, click: function(event, menuItem) { return false; } }); }); </script> <!-- ▼後者のjs --> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script type="text/javascript" src="js/main/jquery.cycle.js"></script> <script type="text/javascript" src="js/main/slideshow.js"></script> このように記述しても後者のものしか動きません。 前後逆にすると前者が動きます。 以前の質問でjQueryのファイルには記述する順番があるとお答えを頂いたのですが、 調べても初心者の私には理解できず・・・。 こちらのファイルを同時に使用するにはどのような順番で記述したら宜しいのでしょうか? 大変困っております、どうか宜しくお願い致します。

  • jQuery

    http://bmath.org/wordpress/?p=663 上記を参考にWEBページをつくってみたのですが、上手くいきません。 javascript部分をhtmlの <script type="text/javascript" src="js/site.js"></script>にいれたからでしょうか? また、jsフォルダは<script type="text/javascript" src="js/jquery.scrollTo-min.js">ではなく、jquery.scrollTo-1.4.3.1を使っています。 よきアドバイスお願いします。

    • ベストアンサー
    • CSS
  • 複数のバージョンのjQueryを同時に使用

    複数のjQueryライブラリを同時に使用するには http://jsajax.com/articles/jQueryUsingMultipleVersion/2012 上記サイトを参照しましたがわからなかったので質問いたします。 「1.3.2と1.1.3.1」のようにバージョンの違うjQueryライブラリを同時に使いたいのですが、 以下のように記述した場合、Feature Listが正常に動作しません。 バージョンの違うjqueryライブラリを同時に使うにはどのように設定すればいいのでしょうか よろしくお願いいたしします <script type="text/javascript" src="jquery/1.1.3.1/jquery.min.js"></script> <script type="text/javascript" src="jquery/1.3.2/jquery.min.js"></script> <!-- ▼jquery_auto --> <script type="text/javascript" src="jquery/jquery_auto_j.js"></script> <!-- ▼animatedcollapse.js --> <script type="text/javascript" src="jquery/animatedcollapse.js"></script> <script type="text/javascript" src="jquery/animatedcollapse-settings.js"></script> <!-- ▼Feature List --> <script type="text/javascript" src="jquery/jquery.featureList-1.0.0.js"></script> <script language="javascript"> $(document).ready(function() { $.featureList( $("#tabs li a"), $("#output li"), { start_item:0 } ); /* // Alternative $('#tabs li a').featureList({ output:'#output li', start_item:1 }); */ }); </script>

  • jqueryのscrollfollowが動かない

    jqueryのscrollfollowが他のスクリプトと衝突しているようで動きません。解決方法はありますか? スライドショー用のスクリプトを記述すると、動かなくなります。 スライドショー用の記述を削除すると、scrollfollowはちゃんと機能してくれます。 おそらく、このスライドショーのスクリプトと衝突して動かなくなってるのだと 思いますが、解決方法はあるのでしょうか? どたなか、よろしければお助けください。 以下が、現在のソースです。 (「※」マークのところがそのスクリプトの記述部分です) ----------------------------------------------------------- <!-- JS -->(※ここからがscrollfollowのスクリプトです。) <script type="text/javascript" src="jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery.ui.core.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> <script type="text/javascript" src="jquery.scrollfollow.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('#sidebar1').scrollFollow({ speed: 500, killSwitch: 'sidebar12' }); }); </script> (※ここまでがscrollfollowのスクリプトです。) <script type="text/javascript" src="smoothscroll.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function backToTop() { var x1 = x2 = x3 = 0; var y1 = y2 = y3 = 0; if (document.documentElement) { x1 = document.documentElement.scrollLeft || 0; y1 = document.documentElement.scrollTop || 0; } if (document.body) { x2 = document.body.scrollLeft || 0; y2 = document.body.scrollTop || 0; } x3 = window.scrollX || 0; y3 = window.scrollY || 0; var x = Math.max(x1, Math.max(x2, x3)); var y = Math.max(y1, Math.max(y2, y3)); window.scrollTo(Math.floor(x / 2), Math.floor(y / 2)); if (x > 0 || y > 0) { window.setTimeout("backToTop()", 25); } } //--> </script> (※画面一番上メインにスライドショーを設置していて、ここからがそのスクリプトです。 下記のスクリプトを削除するとscrollfollowは正常に機能してくれます。記述すると動きません。) <!--スライド--> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="jquery.panelgallery-2.0.0.js"></script> <script type="text/javascript"> $(function(){ $('.slideshow').panelGallery(); }); </script> (※画面一番上メインにスライドショーを設置していて、ここまでがそのスクリプトです。) ------------------------------------------ 以上です。 よろしくお願いいたします!

  • このHTMLの意味はなんでしょうか?

    <script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか? どなたか解説お願いします

    • ベストアンサー
    • HTML