jQueryプラグインfancyBoxを使い方について

2015年01月25日 · jQuery

本日は、jQueryのプラグイン「fancyBox」について紹介致します。

fancyBoxでは、画像が拡大する（ライトボックスやポップアップ、モーダル）と呼ばれているプラグインです。

fancyBoxはweb制作で多く使用されているプラグインです。

使い方について説明していきます

fancyBoxをダウンロード

fancyBoxはこちらからダウンロードできます
http://fancybox.net/
fancybox_1
赤枠の部分からダウンロードすることができます。

fancyBoxのライセンス

fancyBoxにはバージョンが存在しており、ライセンスがバージョンによって違います
fancyBox（古い）：MITライセンス
fancyBox２（新しい）:個人利用はフリー、商用利用は有料
fancyBox2もライセンスはそのままという意識がある方が多いようです。
ライセンスには注意しましょう！

今回使用するのは、fancyBox（古いもの）です。

fancyBoxの構成

フォルダー構成は以下のようになっております
fancybox_2
赤い枠の内容を主に使用します

fancyBoxの読込み

今回もいつもの例にならって
ベースソースを用意
fancyBoxフォルダーをjsに移動
fancyBox_3

移動が完了しましたら、「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>

指定すると以下の様に見えます
fancyBox_4
aタグとimgタグの構成を守れていれば、他の作りはどのような作りでも大丈夫です。

これだけでは動作しません！
fancyBoxを動作させる関数が必要です！

fancyBoxを動作させる関数呼ぶ

先ほど、プラグインの読込みを終えて、その定義している関数を読込む必要性がります。
書き方の内容はjQueryの書き方で大丈夫です。

<script type="text/javascript">
	$(function(){
		$(".group").fancybox({});
	});
</script>

aタグないのクラス「group」をfancyboxの関数を実行するという内容の書き方になります。
「group」クラス全てに「fancybox」動作をします

それぞの、画像をクリックすると以下の様にライトボックスします
fancyBox_5

現在は単品ごとの動作になっているのですが、
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>

完成品はこちら

他にもオプションなどありますので、色々と調べてみてください。

web-wizardry

インターネット・スマホ、そしてテレビにwebの魔法をWizardry