NMN WebDesign

Shadowbox

http://www.smoopy.net/topics/74.htmlShadowboxNMN WebDesign

Shadowbox.js については、イメージマップに対応しているとか、使えるとか説明されていたので、使ってみたいと思いました。

使い方を調べていると、どうも日本語で説明されているところは見つかりません。皆さん使う必要がないのか、普通に使えているのかのどちらかなのでしょうか。

おしえてgoo にはわたしと同様、使い方についての質問がありましたが、回答がピントはずれ？じゃないかと思うようなもので・・・

で、もちろん、Shadowbox.js提供サイト、マイケルジャクソンさんのところからダウンロードし、英語の説明を読んでみました。

普通のリンクでは

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

とやればいいのはわかりますが、「イメージマップの area タグでは rel が使えないので、Shadowbox.setup を使え。」と書いてあり、下のほうへのリンクがあります。

そのセットアップの使い方例が載っていますが、どうもムービーの説明？

でもよく読めば、中学英語程度のレベルでもわかりました。

ってことで、やっと本題です。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true,
});
window.onload = function(){
Shadowbox.setup("area");
};
</script>

をヘッダに入れてあげれば、area タグ（イメージマップ）を使うときはいつもShadowboxを使う。みたいになるようです。

蛇足ですが、上記スクリプトの “area” の部分を “a.movie” にすれば、a の movie クラスではrel を使わなくても良い。ということなのでしょう。

とりあえず、イメージマップでShadowbox.jsを使う方法でした。

以下は修正。09.07.13　（コメントによる指摘を受けて）
上のコードが違っていたので訂正です。下が正しいと思います。

<link rel="stylesheet" type="text/css" href="shadowbox.css">
<script type="text/javascript" src="shadowbox.js"></script>
<script type="text/javascript">
Shadowbox.init({
skipSetup: true
});
window.onload = function(){
Shadowbox.setup("area");
};
</script>

ちなみに、デフォルトでskipSetup は true ということなので、

Shadowbox.init({
skipSetup: true
});

の部分は、

Shadowbox.init();

でも動くようです。

この投稿は 2009年7月2日 木曜日 1:50 AM に topics カテゴリーに公開されました。 この投稿へのコメントは RSS 2.0 フィードで購読することができます。 コメントを残すか、ご自分のサイトからトラックバックすることができます。

コメント / トラックバック11件

1. tanaka より:

   2009/07/13 3:46 PM

   探していた記事でした！でも上記の記述では、イメージマップに対応できないだけでなく、既に見れていたシャドウボックスもみれなくなってしまいました・・・
2. mo より:

   2009/07/13 5:12 PM

   tanaka さん
   コメントありがとうございます。
   ご指摘があり、見直してみましたら、上記コード中、

   skipSetup: true,

   となっている部分の最後のコンマが余分でした。正しくは

   skipSetup: true

   です。ご迷惑おかけしました。
3. 田中 より:

   2009/07/14 10:59 AM

   ご丁寧なメールありがとうございます。

   ただ、やっぱり動かないみたいです・・・

   ちなみに

   にしたら、通常の場合は開くことができました。

   イメージマップはいずれにしてもはじかれるようです。

   なかなか難しいものですね（汗）
4. mo より:

   2009/07/14 1:05 PM

   そうですか・・・
   私が作ったサイトではイメージマップでの動作も確認できたのですが、お役に立てず残念です。

   どなたかのいいアドバイスがあるといいですね。成功の折には、原因がわかったら教えてください。
5. ハト より:

   2009/08/25 12:33 PM

   Shadoboxのイメージマップの使い方、ほんとに探してもなかなか見つかりませんでした。
   こちらの記事で無事対応できました。
   大変助かりました。
   使ってみた感想ですが、イメージマップでもグループ化できるといいですね。
6. mo より:

   2009/08/25 1:42 PM

   ハト　さん

   こちらの記事を参考にしていただきありがとうございます。
   無事にできたということで安心しました。
   ご丁寧にコメントもいただき、ありがとうございました。
7. poet より:

   2009/11/18 4:01 PM

   素晴らしいです。イメージマップでshadowbox使えました。
8. mo より:

   2009/11/18 11:41 PM

   poet さん

   コメントありがとうございました。
   お役に立ててよかったです。
9. naohor より:

   2010/04/12 3:51 PM

   こんにちは。shadowboxのイメージマップの使い方で検索してきました。
   こちらの記事でイメージマップ使うことができました。ありがとうございます。
   私の場合サイズ指定もしたかったので、下記の様に記述したらうまくいきました。

   window.onload = function(){
   Shadowbox.setup(“area”,{
   width:300, //←幅を300ピクセルで表示
   height:300 //←高を300ピクセルで表示
   });
   };
10. mo より:

    2010/04/12 5:15 PM

    naohor さん

    コメントありがとうございます。

    サイズ指定もできるんですね。
    補足情報ありがとうございました。
11. てけ より:

    2010/06/21 4:22 PM

    shadowboxのクリッカブルマップでの利用法こちらの方法でばっちりでした（＾＾
    ありがとうございます！

    使えない方がいらっしゃるようですが、もしかしたら別のJavascriptを並列使用しているのではないでしょうか？

    私の場合、window.onload を外部スクリプト内で使用していたもう一つのスクリプトとバッティングして動きませんでした。

    このスクリプトを少し改良して、window.onloadしないように書き直したら、無事動きました。
    ※もちろん、このスクリプトの使用そのものをやめてしまえばバッチリ動きます。