- ベストアンサー
jquery lightboxが作動しません
- ホームページビルダー14で作成中のホームページにjquery lightbox0.5を組み込んだが正常に動作しない
- ホームページビルダー上の確認画面とローカル画面では正常に動作するが、サイト上にアップすると上手くいかない
- 白い拡大画面が表示されるが、写真が掲載されず×印が表示されている
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
404 エラーは単純です。 そのファイルが見つからないのですから、アップロードされていない（違う場所にアップロードしていまったかもしれない）か、ファイルへのパスが間違っている（ファイル名も含めて）かです。 photos/20120601g11.jpg このファイルがアップロードされていないということです。 ですから、http://サイト名/photos/20120601g11.jpg とブラウザのアドレス欄に入力しても表示されないはずです。 ファイル名に間違いがないか、また正しくアップロードされているか確認してください。 あと少しで完成すると思います。
その他の回答 (2)
- outbrave
- ベストアンサー率60% (231/380)
ソースはコピーされたようで間違っていないようです。 そのファイルの場所ですが、同じ階層に cssフォルダ jsフォルダ photosフォルダがあるか確認してください（中のファイルも）。 <div id="gallery"> <ul> <li> <a href="photos/20120601g11.jpg" title="文字を入力します"><img src="photos/20120601g1.jpg" width="220" height="171" alt="" /></a> </li> </ul> </div> <a href="photos/20120601g11.jpg" title="文字を入力します"><img src="photos/20120601g1.jpg" width="220" height="171" alt="" /></a> #gallery の外にも画像のリンクを書いて表示されるか確認します、表示されれば画像ファイルと画像ファイルへの相対パスは間違っていません。 それでもだめなようでしたら、次のソースを適当な名前（test.html）で保存してアップロード後確認してください。 <!DOCTYPE html> <html lang="ja"> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> </head> <body> <div id="gallery"> <ul> <li> <a href="photos/20120601g11.jpg" title=""><img src="photos/20120601g1.jpg" width="220" height="171" alt=""></a> </li> </ul> </div> </body> </html>
お礼
早々のご返答、ありがとうございます！ 順番に報告します。 ＞同じ階層に cssフォルダ jsフォルダ photosフォルダがあるか確認してください。 同じ階層にあります。中身も確認しました。 ＞#gallery の外にも画像のリンクを書いて表示されるか確認します。 <a href="photos/20120601g11.jpg" title="文字を入力します"><img src="photos/20120601g1.jpg" width="220" height="171" alt="" /></a> ご提示頂いた↑これをコピペし、サイト上で確認したところ、小さい画面は表示されますが、クリックすると『404Ｅrror』 というページが表示され、「※指定されたページ（ＵＲＬ）は見つかりません。」と書いてある画面が立ち上がりました。 因みに、ホームページビルダーのプレビュー画面及び、ローカル画面で確認すると、別画面に変わってしまいますが、拡大画像を見る事が出来ます。 ＞次のソースを適当な名前（test.html）で保存してアップロード後確認してください。 test.htmlで保存し、サイト上に公開して確認したところ、やはり×印の白い拡大画面が立ち上がりました。 ホームページビルダーのプレビュー及び、ローカル画面では、きちんと作動しています。 ん....すみません。。。ご指示頂いた通り、私は出来ていますでしょうか？ 大変申し訳ございませんが、よろしくお願いいたします。
- outbrave
- ベストアンサー率60% (231/380)
お悩みのようですな。 表示されない写真の画像を普通に img タグで書いたら表示されるのでしょうか。 真ん中の×印は、ローディング画像が表示されていないような気がします。 ですから、画像への相対パスが間違っているのではないかと思うのですが、実際のページが確認できないことにはどうなっているのかわかりません。 不具合のあるページが公開できるのなら見てみますが。
お礼
あぁ～ outbraveさん！！ 先日はどうもありがとうございました。 実は、あれから諦め切れず、jquery lightboxを発見したので、outbraveさんが教えてくださった通りにやってみたら、途中まで出来たんです！ outbraveさんにお礼が言いたくて、ご覧になって頂けたら。。。と願いを込め、お礼を書いて質問欄にアップしたのですが、サポート担当から規約違反だと連絡が来て消されてしました.... その節はお世話になりながら、またこうして....どうもありがとうございます。 本当に感謝です！ 本題です。 途中までは出来たのですが、また行き詰ってしまっています。 herd内に下記を入れました。 <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('#gallery a').lightBox(); }); </script> そして、掲載したい写真のＨＴＭＬは、以下の様にしました。 <div id="gallery"> <ul> <li><a href="photos/20120601g11.jpg" title="文字を入力します"> <img src="photos/20120601g1.jpg" width="220" height="171" alt="" /></a></li> </ul> </div> outbraveさんだけなら、ホームページを見て頂きたい気持ちは、やまやまなのですが、情報が残るのはちょっと避けたいので、ＨＴＭＬだけを記載いたします。 この情報でお解りになりますでしょうか？ お手数をおかけいたします、よろしくお願いいたします。
お礼
outbraveさん！！ でっ、出来ました！！！！！ 「ファイルがアップロードされていない」というoutbraveさんのお言葉を考慮して、アップロード作業をする際に、拡大画面のデータを追加選択して転送してみたら、出来ましたＴoＴ いつもアップロードをする時、ホームページビルダーが勝手にアップロードするデータをピックアップしてくれていたので、自ら選択するという事に、全く気付かずにおりました。。。 すごく初歩的なミスですね。。。 貴重なお時間を割いて頂き、ご丁寧に何度も、本当にありがとうございました。 本当に感謝しています。 これでホームページ作りの作業を進める事が出来ます！ 本当にありがとうございました。