shadowboxをクリッカブルマップで使う方法

lightbox風のプラグインでshadowboxというのがあるのですが、これをクリッカブルマップで使った時に動かなかったのでそれのメモです。

shadowboxとは

lightbox風に表示してくれるJavaScriptのプラグインです。jQueryの他にPrototypeなどのJSライブラリと組み合わせられるのが特徴です。

クリッカブルマップと組み合わせて使う

一枚の画像から複数の画像へリンクを貼ってshadowboxを起動させたかったので、クリッカブルマップを使いました。

ですので、普通ならaタグにrel=”shadowbox”などとして使う所をareaタグに書いてみたのですが動きませんでした。

JavaScriptに追記が必要

そこで検索したらこちらのサイトに解決方法が載っていました。

<head>内に書くコードをこのように記します。

<script>
Shadowbox.init();
window.onload = function(){
Shadowbox.setup("area");
};
</script>

これでareaタグでもきちんと動くようになりました。

colorboxだと・・・

ちなみに他のlightbox風のプラグインcolorboxを試したのですが、こちらは特になにもせずにareaタグからでも動きました。

コメント

タイトルとURLをコピーしました