ページを読み込んだらすぐにfancyBoxを実行する方法

Javascript

画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆるLightBox風のjQueryのプラグイン、「fancyBox」ですが、 これをページを開いた時にすぐ実行する方法を調べたので書いておきます。

JSファイルは普通に読み込む

javascriptファイルは普通に読み込みます。

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fancybox.js"></script>

実行の箇所をloadで読み込む

そして、実行のjavascript部分を以下のようにします。

$(window).load(function(){
	$.fancybox.open($('.fancybox'));
});

$('.fancybox')の箇所には適用したい要素を指定します。

注意点

以上で完成ですが、注意点があります。

fancyboxは2から商用は有料とのことですのでお気をつけ下さい。詳しくはfancybox2のサイトでご確認下さい。

ちなみにバージョン1の方を試してみたのですが、うまくいかなくて出来ませんでした・・・ので出来る方法があれば教えて欲しいです。

他のプラグイン

商用で何か使えないかなと思って探したら、colorboxが同じような機能があったのでそちらを使うと、同じ動作ができました。

こちらでは以下のように実行します。

$("#colorbox").colorbox({
	open:true
});

("#colorbox")の箇所には適用したい要素を指定します。