画像などをクリックすると拡大画像をふわっと表示してくれる、いわゆる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")の箇所には適用したい要素を指定します。
コメント