重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

Shadowbox.jx3.0.3が動かない。

解決済

  • 質問者：kakeru0926
  • 質問日時：
  • 回答数：2件

初めまして、このたびlightbox風のjqueryに惹かれて、shadowbox.jsの導入を考えております。。。が、

公式ホームページでadapterに jQuery を選び、ZIPを解凍して、一番簡単そうな画像表示を試みてみましたが上手くいきません。

色々な解説サイトを見ましたが、手順どおりやってはいるつもりなのですがお手上げになってしまいました。

何度試みても、ただ画像にリンクするだけで、lighboxらしい動きになりません。

以下にソースを掲載させて頂きますので、どうかお力添えお願い致します。。


<html>
<head>

<title>test</title>

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init();
</script>

</head>
<body>

<a href="1.jpg" rel="shadowbox" title="My Image">My Image</a>

</body>
</html>

※index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。

jqueryもDLして、ヘッダ部分に
<script type="text/javascript" src="/jquery-1.5.1.min.js"></script>
という一文も入れてみましたが全く動かない状態です。


説明足らずな点も多いと思いますが、どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： outbrave
  • 回答日時：

試してみました。


ポイントは、文字コードを UTF-8 にしたこと、Shift_JIS ではエラーになりました。
（実際には使用しないため、それ以上調べていません）

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">google.load("jquery", "1.4.2");</script>
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
language: "ja",
players: ["img"]});
</script>
<link rel="stylesheet" href="shadowbox.css" type="text/css">
</head>
<body>
<a href="xxx.png" rel="shadowbox">My Image</a>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

動きました！

ハッキリした明確な理由はしっくり来ていませんが動きました！

ヘッダの中に

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

の3行を追加してみたら動きました。
文字コードの設定が大事だったってことなんでしょうか？

凄く助かりました。ありがとうございます！

通報する
お礼日時：2011/03/18 16:39

No.1

  • 回答者： fujillin
  • 回答日時：

＞index.htmlやshadowbox.css ,shadowbox.jsは全て同階層です。


jqueryはどこに置いてますか？

＞<script type="text/javascript" src="/jquery-1.5.1.min.js"></script>
で、jqueryは実行されていますか？

この回答への補足

初めまして、ご回答ありがとう御座います。

jqueryも同階層に置いています。

特にエラーも無くindex.htmlは表示できていますが、jqueryが実行されているかどうかというのは、どう判断すればよいのでしょうか。。

お手間を取らせて済みません。

補足日時：2011/03/18 16:18
通報する
    • good
    • 0
    • 件
通報する

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報