jQueryプラグインfancyBoxを使い方について
2015年01月25日 · jQuery
本日は、jQueryのプラグイン「fancyBox」について紹介致します。
fancyBoxでは、画像が拡大する(ライトボックスやポップアップ、モーダル)と呼ばれているプラグインです。
fancyBoxはweb制作で多く使用されているプラグインです。
使い方について説明していきます
fancyBoxをダウンロード
fancyBoxはこちらからダウンロードできます
http://fancybox.net/
赤枠の部分からダウンロードすることができます。
fancyBoxのライセンス
fancyBoxにはバージョンが存在しており、ライセンスがバージョンによって違います
fancyBox(古い):MITライセンス
fancyBox2(新しい):個人利用はフリー、商用利用は有料
fancyBox2もライセンスはそのままという意識がある方が多いようです。
ライセンスには注意しましょう!
今回使用するのは、fancyBox(古いもの)です。
fancyBoxの構成
フォルダー構成は以下のようになっております
赤い枠の内容を主に使用します
fancyBoxの読込み
今回もいつもの例にならって
ベースソースを用意
fancyBoxフォルダーをjsに移動
移動が完了しましたら、「head」タグ内にjsとcssを読込みます
<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="js//fancybox/jquery.fancybox-1.3.4.css" /> <script type="text/javascript" src="js/fancybox/jquery.fancybox-1.3.4.pack.js"></script> </head>
jQueryのライブラリは最新ですと動作しないので注意が必要です
8くらいのバージョンであれば、動作すると思います
動作させるhtmlを作成
今回は簡単な作りの物とします。
この作りは、作成する内容に合わせることができます。
htmlの「main」内に以下の内容を追加します
<div id="list_img"> <ul class="clearfix"> <li><a class="group" href="img/img_1.jpg"><img src="img/img_1.jpg" alt="" width="250"></a></li> <li><a class="group" href="img/img_2.jpg"><img src="img/img_2.jpg" alt="" width="250"></a></li> <li><a class="group" href="img/img_3.jpg"><img src="img/img_3.jpg" alt="" width="250"></a></li> </ul> </div>
指定すると以下の様に見えます
aタグとimgタグの構成を守れていれば、他の作りはどのような作りでも大丈夫です。
これだけでは動作しません!
fancyBoxを動作させる関数が必要です!
fancyBoxを動作させる関数呼ぶ
先ほど、プラグインの読込みを終えて、その定義している関数を読込む必要性がります。
書き方の内容はjQueryの書き方で大丈夫です。
<script type="text/javascript"> $(function(){ $(".group").fancybox({}); }); </script>
aタグないのクラス「group」をfancyboxの関数を実行するという内容の書き方になります。
「group」クラス全てに「fancybox」動作をします
それぞの、画像をクリックすると以下の様にライトボックスします
現在は単品ごとの動作になっているのですが、
htmlのaタグに「rel=”xxx”」と共通の名前を付けることでグループかした動作になります。
<div id="list_img"> <ul class="clearfix"> <li><a class="group" rel="group1" href="img/img_1.jpg"><img src="img/img_1.jpg" alt="" width="250"></a></li> <li><a class="group" rel="group1" href="img/img_2.jpg"><img src="img/img_2.jpg" alt="" width="250"></a></li> <li><a class="group" rel="group1" href="img/img_3.jpg"><img src="img/img_3.jpg" alt="" width="250"></a></li> </ul> </div>
完成品はこちら
他にもオプションなどありますので、色々と調べてみてください。