忙しい現代人の腰&肩のお悩み対策!

こんにちは。

このたび制作している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制作初心者のため、見当はずれなことを訊いていましたらご容赦ください。
どうぞよろしくおねがいします。

このQ&Aに関連する最新のQ&A

A 回答 (1件)

なんだかjqueryが読み込まれていないように思えますが、まずはそのあたりをチェックしてみてはどうでしょうか?



読み込んだところで、
 alert($);
とでもしてみればわかるかと。
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。さきほど自己解決しました。

ご指摘のとおりjqueryが読み込まれていなかったようです。

jqueryを格納しているフォルダのスペルが”prettyphoto”と"prettyPhoto"と混同してしまい、サーバー上のソースをいろいろ書き換えているうちに起きた凡ミスでした。

ひとつ学習しました!どうもありがとうございました!

お礼日時:2012/04/14 00:58

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavaScriptプラグインが読み込めません

「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。
MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に

<script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script>
<script type="text/javascript" src="easyslider1.7/js/jquery.js"></script>

と記述し、
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto:true
});
});
</script>
で動作させようとしているのですが、
ブラウザで試すと動かず、コンソールには

ReferenceError: Can't find variable: jQuery
TypeError: Result of expression '$("#slider").easySlider' [undefined] is not a function.


と出てきます。
上段の”jQuery”はeasySlider1.7.js内に記述されているものです。

ちなみにgoogleAPIのjQueryをロードしても同じエラーが出ました。


何が原因なのでしょうか。ご回答宜しくお願いします。

「easySlider1.7」というJavaScriptプラグインを使い、サイト内の画像をスライドさせようとしています。
MacのデスクトップにおいたフォルダのHTMLと同じ階層にeasyslider1.7というフォルダをおき、<head>内に

<script type="text/javascript" src="easyslider1.7/js/easySlider1.7.js" ></script>
<script type="text/javascript" src="easyslider1.7/js/jquery.js"></script>

と記述し、
<script type="text/javascript">
$(document).ready(function(){
$("#slider").easySlider({
auto:true
});
});...続きを読む

Aベストアンサー

asyslider.jsを読み込む前に、jquery.jsを読み込んでいますか?

ご質問文の表記の通りだと逆順ですが…

QMacターミナルで実行中のプログラムを中止するには?

Macのターミナルでプログラムを走らせているとき、
実行中のプログラムを一時停止したり中断・終了させるには
どうしたらいいでしょう?

Unixだと、Control+s とか Control +c とかでできますよね。
Macだと、それではできないみたいなんです。

基本的な質問ですみませんが、どなたか教えていただけないでしょうか。

Aベストアンサー

ごく普通にControl + Cで中断できますよ。

もしかしてControlキーをcommandやcapslockと押し間違えているとかいうことはありませんか?

QNull またはオブジェクトではありませんのエラー

HTML部で
<FORM NAME="frm1" METHOD="post" ACTION="xxx.html">
 <INPUT TYPE="hidden" NAME="txt1">
</FORM>

javascriptで
document.frm1.txt1.value = "hoge";
document.frm1.submit();

のように記述しています。
FireFoxブラウザでは期待通りの動きをするのですが、
IE6では「document.frm1.txt1はNullまたはオブジェクトではありません」
とエラーが出てしまい、画面遷移しません。

因みにページはフレームを利用しており、
フォームや画面遷移はメインフレームでしか使っていないので、
フレーム名も特につけておりませんし、
targetの記述も使用しておりません。
そこらへんに原因があるのでしょうか。
それにしてもFireFoxでは可、IEではエラー
というのも解せないです。

どなたか分かる方いらっしゃいましたら
ご教示願います。

HTML部で
<FORM NAME="frm1" METHOD="post" ACTION="xxx.html">
 <INPUT TYPE="hidden" NAME="txt1">
</FORM>

javascriptで
document.frm1.txt1.value = "hoge";
document.frm1.submit();

のように記述しています。
FireFoxブラウザでは期待通りの動きをするのですが、
IE6では「document.frm1.txt1はNullまたはオブジェクトではありません」
とエラーが出てしまい、画面遷移しません。

因みにページはフレームを利用しており、
フォームや画面遷移はメインフレームでしか使っていないので、
...続きを読む

Aベストアンサー

>document.frm1
alert(document.frm1);
これが何と出るか。
場合によってはこれも「document.forms[x];」系にしてみる

あと一応確認しておくけど
function(){}
じゃない限りはHTML上に書かれた順に実装される事になってる。
まさかformが現れる前に実行させてないよね?

Qillegal string offset

php5.3では動いていたプログラムをphp 5.4 で動かしたらwarning illegal string offsetが出て困っています。以下のプログラムでwarningが出ないようにするにはどのようにコーディングすればよいのでしょうか?


$a = array('exists' => 'foo');
if ($a['exists']['non_existent']) {
print 1;
}
print 2;
exit;

Aベストアンサー

isset()を使えばいいと思います

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qポートの80と443

こちらのサービス(https://secure.logmein.com/)を利用すると、インターネットを見られるサーバーのポートの80と443が空いていればルータやファイアウォールに特段の設定なく外部からサーバーを操作できるそうですが、逆にサーバーのポートの80や443を空けることには何か危険性があるのでしょうか。

Aベストアンサー

ポート80は一般的なHTTP、ポート443はHTTPSです。
この2つのポートがあいていなければインターネット接続(WEBブラウジング)は出来ません。
ですから、ほとんどのファイアウォールでこのポートは開いています。(インターネット接続を制限している社内LANでは当然閉じていますが)

ちなみに、よく使うポートとしてはFTPで20、21、SMTP(送信メール)で25、受信メールPOP3で110あたりです。セキュリティポリシー上、この辺は制限される事も多いですが、HTTP 80、HTTPS(暗号化用)443は通常閉じません。


危険性?
WEBプロトコルを使ってFTP的なファイル転送(WebDAV)やVPN等も出来るようになっています。当然そこにはある種の危険はつきものですが、WEBブラウジングに伴う危険と大きく変わりません。ウィルス等に感染していればこの2つのポートだけでも相当危険でしょうね。

参考まで。

Q別ファイルのfunctionの読み込み方

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために私が最初に書いたhtmlの文です(もちろん実行できませんでした)
------------------------------------
<html>
<script language="javascript" src="hello.js">
aisatsu(){
document.write(aa);
}
</script></html>
------------------------------------

こんにちは
外部ファイル hello.js
-----------------------------
function aisatsu(){
var aa="hello"
}
-----------------------------
というファイルが存在した時にjikkou.htmlでaaの値、”hello”を呼び込みたい場合はどう記述すればよいのでしょうか?htmlのなかでaisatsu()をどこに記述していいのか分かりません。どうか教えてください。ただ、hello.jsのほうは実際の記述を簡略化したものであるのでそちらのほうはいじれません。

宜しくお願いします。

必要ないかもしれませんが、念のために...続きを読む

Aベストアンサー

function内で「var」をつけて変数を宣言するとfunction外からその変数の内容を取得することができなくなります。(returnで参照することはできます。)
なので変数の内容を取得する場合は「hello.js」の内容を

function aisatsu(){
var aa="hello";
return aa;
}

このように修正し、

<script language="javascript" src="hello.js"></script>
<script language="javascript">
var data=aisatsu();//「aisatsu()」関数の「aa」変数内のデータを引っ張り出す(return aa;)
document.write(data);//書いたり
alert(data);//アラートしたり
window.status=data;//ステータスバーに表示したり・・
</script>

Q会社名の後につくInc.とは?

こんにちは。
会社名の後につく、Inc.とは、どういう意味でしょう?会社の法的な位置付けをあらわしていると思うのですが、実際の所どうなんでしょう?1.日本語でどういう意味か、2.英語の原型はどういうかたちか。教えて下さい。


ちなみに、co.,ltd.はcompany limited か、または、cooperation limitedで、株式会社(有限責任)の意味ですよね??


回答よろしくお願いします。

Aベストアンサー

inc.は
incorporated の略で
「一体化した,法人組織の」の意味だそうです。
「有限責任の」の意味もあります。

映画「モンスターズ・インク」のインクもこれですね。

Q