lightbox2が動きません

Question

HPにlightbox2を使っているのですがうまくいきません。
原因がつきとめられずに困っているので、お力を借して欲しいです。

[使用しているもの]
lightbox2(v2.8.1)

[現状]
クリックすると黒い背景に画像が表示されるが、動きはなく、元々入っている「×」や「→」等の.png画像も表示されない。

[htmlのhead内の表記]

<link href="lightbox2/css/lightbox.css" type="text/css" rel="stylesheet" media="screen">
<script src="lightbox2/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="lightbox2/js/lightbox.js" type="text/javascript"></script>

[その他]
・同ページで、JQueryを使ってページ内スクロールをしている。
・lightbox.css内のディレクトリの書き換えは行っている。

いくつかサイトを参考にしましたが、バージョンが異なるためか、
ダウンロードして使うファイルも、headの表記もみんな違いました。
参考になるHP等も合わせて紹介していただけると大変助かります。

Answer 1

[html表記順によるミス]
jQueryの読み込み位置をページ最後にしていたため、headに記述したlightboxファイルが正しく動かなかった。

jQueryの読み込み表記

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

のあと

<link href="lightbox2/css/lightbox.css" type="text/css" rel="stylesheet" media="screen">
<script src="lightbox2/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="lightbox2/js/lightbox.js" type="text/javascript"></script>

を記述すると正しく動作した。

Answer 2

cssからの画像フォルダのパスが違うのではないですか？

css/lightbox.css
images/ここに画像
js/lightbox.js

この通りに配置すれば表示されないですか？

Comments

[AyanoYamashina]

imagesに入っている画像を、下記の（例）のように載せたい画像として（モーダルウィンドウの正面）にもってくることはできるので、それは問題ないと思います。
（例）
<a href="images/next.png" deta-lightbox="lightbox" data-title="My caption">画像</a>
上記で画像の表示は可能です。
つまり・・画像を読み込むのは問題ないが、質問に書いています[htmlのhead内の表記]や、lightbox2から持ってくるファイルが違うや書き換え方が違うという問題があるのではと考えています。

また、ちょっと異例ではあるんですが[htmlのhead内の表記] にあるとおり
lightboxでダウンロードしたファイルをすべて、lightbox2というフォルダで管理しています。

[MineoOkuda]

images/next.pngの場所は
lightbox2/images/next.pngのようになっているということですか？

動かないというのは実際にライトボックスが表示されない事でしょうか？
"（モーダルウィンドウの正面）にもってくることはできる"ということは正常に動作しているように思います。
ギャラリーとして動作させたいのであればdata-lightbox="lightbox"属性を（上記d[e]ta-lightboxは誤記ではないですか？）追加すればギャラリーとして動作すると思います。

[AyanoYamashina]

ありがとうございます。
そうです。lightbox2/images/next.pngというようになっています。

＞動かないというのは実際にライトボックスが表示されない事でしょうか？
ライトボックスでみられる、ゆっくりとした画面の表示（この辺はのちのち調整できる部分だとは思うのですが）や、closeのボタンが表示されないのです。
ただ、リンクでページからページで飛んだといった風なので、javascript等に問題があるのかなと思うのですが・・・。

お教えいただいた、ギャラリーも試してみたのですが動きませんでした。
上記と同じで、ただリンクでページに飛んでいるような感じでした、closeの表示もありません。

[MineoOkuda]

jQueryが動作していないですね。
head内やhtmlソースの記述や、コンソールのエラー出力をすべて貼り付けるなどしていただかないと詳しいことがわかりません。

[AyanoYamashina]

ありがとうございます。
どうしてjQueryで動いているもの（スクロール機能）と動いていないもの（lightbox2）があるのか冷静に調べ直してみました。
jQueryを読み込む記述が、lightboxファイルを読み込む記述より後に書かれていることが分かりました。
jQuery
lightboxファイル
の順番に直しましたら、正しく動作しました。

単純なミス大変失礼しました。jQueryとlightbox同時に動かないことがある等の
HPをみたことがあったので、焦ってしまいましたが、改めてhtmlを記述する際の
順番の大切さが身にしみました。
親切に対応いただき、とても心強かったです。ありがとうございました。

[MineoOkuda]

解決できて良かったです。
ソースの順番などのケアレスミスは誰もが初めにやってしまうミスだと思います。
まずわからない時は
・コンソールでどういったエラーが出ているのか。
・エラー内容を検索（そのまま検索すると割と出てきます。）

何かとバッティングしているのであればサンプルと全く同じ状況を作ってみて、何がダメなのか理解してみるといいと思います。
どうしてもわからない時はここで、「どういった内容のエラーなのか」面倒臭がらずに仕様や記述箇所のソースなどを貼り、質問してみると皆さん親切に教えてくださると思いますよ(^^)（僕も最近入ったばかりですが・・）

Answer 3

ここの部分

<link href="lightbox2-masuter/src/css/lightbox.css" type="text/css" rel="stylesheet" media="screen">

<link href="lightbox2-master/src/css/lightbox.css" type="text/css" rel="stylesheet" media="screen">

ファイル名違いません？F12押してそんなファイル無いってエラー出てませんか？
コンソールを見てエラーがあった場合、追記してもらえますか？

Comments

[AyanoYamashina]

さっそくのご返答ありがとうございます。

ファイル名間違えというのは下記のようなことでしょうか。
場所がごちゃごちゃしていましたので、統一いたしました。
```
<link href="lightbox2/css/lightbox.css" type="text/css" rel="stylesheet" media="screen">
<script src="lightbox2/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="lightbox2/js/lightbox.js" type="text/javascript"></script>
```

コンソールをみてみますと確かに、
Failed to load resource: net::ERR_FILE_NOT_FOUND
という表記があります。
エラーがでているファイルとして表示されたのは、
jquery.flexslider.js
でした。
このファイルはどういうものでしょうか？

[deathsan]

聞きたかったことは単純にスペルミスなのかどうかってことです。
質問文がすでに編集されてますが、htmlのheadの記述でlightbox2-masuterなんてフォルダなかったですよね？正しくはlightbox2-masterですよね。
こういうケアレスミスで表示されない場合もよくありますので確認のため質問してます。

それでjquery.flexslider.jsですが、どういうファイルかなんて知らなくてもいいと思いますよ。私も知らないですね。
headerでそれを読み込んでいるけど、ファイルパスが違うだけだと思います。
そんなファイルなければjquery.flexslider.jsをダウンロードしてきて適当な場所に置いてパスを指定し読み込んでください。

それともう1回webコンソールからデバッグしなおしてください。元々の画像が表示される場所にカーソルを合わせ（画像表示されなければ表示されないアイコン出てますよね）CSSを確認してweb上のファイルパスを書きかえてみてください。
web上から書き換えて画像が表示されたら元のCSSの画像のファイルパスの指定が間違っているということです。

[AyanoYamashina]

そうですね、一つの間違えで動かない場合もあるのでそこは注意してみていきます。
ありがとうございます。

jquery.flexslider.jsのファイルは外部からダウンロードし、入れてみました。
エラーそのものはなくなりましたが、lightboxは作動せず、[現状]のままでした。

画像が表示されていないというアイコンもでていないので、jQueryがうまく動いていないということだと思います。一番最初に記述しましたとおり、jQueryのスクロール動作はうまくいっているので、javascriptとの関連づけに問題があるのかもしれません。
スペルミスも多発しているので、もう一度ソースを読み直してみたいと思います。

[AyanoYamashina]

ソースコードをあらためて読み直した結果。
jQueryを読み込む記述が、lightboxファイルを読み込む記述より後に書かれていました。
jQuery
lightboxファイル
に直しましたら、正しく動作しました。

ケアレスミス大変失礼しました。htmlを記述する際の順番の大切さが身にしみました。
親切に対応いただき、とても心強かったです。ありがとうございました。