スマホ対応も完璧なLightbox系 jQuery 『fancyBox3』の使い方とオプション

執筆: Eazy-T (uzurea) アイコン Eazy-T (uzurea)

この記事をSNSでシェア

Lightboxなどに代表される、画像やビデオなどを画面推移せずに画面上でオーバーレイの拡大表示させる機能は、昨今のwebサイトでは必須技術と言っても良いでしょう。

現在、jQueryプラグインとして様々なオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。

その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。

『fancyBox3』の主な機能と特徴

まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。

  • モバイルファースト
  • 設置、設定が簡単
  • 分かりやすくて便利なUI
  • YouTubeやVimeoやGoogleマップ、Instagramなどの対応
  • 画像はもちろん、inline要素、Ajaxロード、iframeにも対応

およそ昨今のwebサイト構築時に必要とされる基本機能と、更に痒い所に手が届くアレコレが網羅されています。

特に個人的には、サムネイルの画像をタップしたときに、サムネイルからニュルッと拡大してくるようなズーム・アニメーション処理(※)の有無がついているオーバーレイ機能が好きです。感覚的に判りやすいですし。UXの観点からもわりと重要だと思うんですよね。

※余談ですがこういったUIを実装した最初の実用的なLightbox系にHighslide JSというのがありました。すでに開発は終わっていてモバイル対応などされていませんが、ズーム・アニメーションの他にも、拡大した後の画像を画面上で自由ドラッグできたりと中々革新的で心地いいスクリプトでした。)

つづいて以下に、解説をしていきましょう。

モバイルファースト

fancybox3はこれまでのオーバーレイプラグインよりも、よりスマートフォンでの表示に特化しています。

レスポンシブ環境に完全対応する事を念頭に開発されているので、オーバーレイするメディアや、ユーザーの環境……特にスマートフォンタやブレット環境での操作感は抜群で、特定の動作での表示がずれたりしません。

左右へのスワイプ機能で画像ギャラリーを遷移させたり、画像以外の領域のタップで、オーバ―レイを解除したりと、一般的なユーザーでも感覚的に使えるよう丁寧に作られています。

例えば、オーバーレイ後に更にピンチ操作で拡大縮小しますが、その際表示されている画面全体が拡大するのではなく、画像のみが拡大しfancyBox3のUIなどはそのまま維持されます。

そしてオーバーレイした画像をさらにタップする事で、ナビゲーションが非表示になって画像をオリジナルサイズ表示で最大化する。

……といった感覚的にわかりやすい操作がデフォルトで実装されています。

この辺りを他のプラグイン+カスタマイズを試行錯誤した事がある方なら分かると思いますが、結構しんどいんですよね。

fancyBox3の設置手順

それでは、fancyBox3の設置方法を解説していきましょう。

まずは『fancyBox3』のオフィシャルサイトからデータ一式をダウンロードしましょう。

ページ上部中にある『DOWNLOAD』をクリックし、ローカルにデータ一式のzipファイルを保存します。

fancybox3オフィシャルサイト

ダウンロードしたzipアーカイブを解凍し、/dist 中に格納されているファイルを使用します。

/dist 内に格納されている……

cssとjsファイル1対を利用します

jquery.fancybox.min.js や、jquery.fanvybox.mon.css など”min”が付いたものは改行などが除去されファイル容量が軽減されていますが、独自にコードをカスタマイズしたい場合にはminの無い方を利用した方が良いでしょう。

また、別途jQuery本体もダウンロードしておきましょう。
※jQuery3.x系に対応しているのでjQuery Migrateは不要です。

必要最低限の記述で『fancyBox3』を設置

動作に必要なHTMLの記述一式はは下記の通りです。

<!-- CSSを読み込み…… -->
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css">

<!-- オーバーレイさせる箇所のhtml記述…… -->
<figure>
<a href="image.jpg" data-fancybox data-caption="キャプションを記述">
<img src="thumbnail.jpg" alt="サムネイル画像" /></a>
</figure>

<!-- body最下部で関連JSファイルを読み込むのが推奨されています -->
<script src="js/jquery-3.2.1.min.js"></script>
<script src="jquery.fancybox.min.js"></script>
<script>
	$('[data-fancybox]').fancybox();
</script>

※jQueryを読み込んでから、jquery.fancybox.min.jsを読み込ませる必要があるのでjQuery本体を上に記述します。
※パスは適宜変更してください

head要素内でfancyBox3のcssを読み込み、body下部にてjQueryと、fancybox3の読み込みと、fancybox3の設定を記述する事が推奨されています。

これはページの読み込み速度や描画順に起因する様ですので、ソースコードをhead内にまとめてすっきりさせたい人はjQueryの呼び出し処理を下記の様にすると良いと思います。

<script>
$(document).ready(function() {
	$('[data-fancybox]').fancybox();
});
</script>

必要最低限な設定での『fancybox3』動作デモはこちら

複数の画像をグループ化させる

data-fancybox属性に共通項目を指定する事でグループ化させギャラリー表示が可能です。

<a href="image_1.jpg" data-fancybox="group" data-caption="image_1.jpgのキャプション">
<img src="thumbnail_1.jpg" alt="サムネイル画像1" /></a>
<a href="image_2.jpg" data-fancybox="group" data-caption="mage_2.jpgのキャプション">
<img src="thumbnail_1.jpg" alt="サムネイル画像2" /></a>
…

※data-fancybox=”group”の「group」は任意の値でOKです。

複数画像をグループ化した『fancybox3』動作デモはこちら

Youtube、Vimeo、googleマップ表示や、inline、iframe、ajax 読み込み

fancybox3はYoutubeやVimeo、googleマップ、instagramなどの外部サービスの自動判別表示などにも対応しています。

特定の埋め込みコードを利用しなくても、リンク先のURLなどで判別し自動的に最適な表示をしてくれるのが中々便利。

<li><a data-fancybox="etc" data-caption="キャプション Youtube" href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">YouTube</a></li>
<li><a data-fancybox="etc" data-caption="キャプション Vimeo" href="https://vimeo.com/191947042">Vimeo video</a></li>
<li><a data-fancybox="etc" data-caption="キャプション Googleマップ" href="https://www.google.co.jp/maps/place/....">Google Map</a></li>

※googleマップは短縮URLだと正しく動作しないのでご注意を。マーカーを表示したい場合別途調整が必要そうです(調査中)。

また、inline要素やiframe表示やAjax表示も可能ですが、この場合a要素にdata-type属性コンテンツの種類を設定する事で動作します。またhtmlタグを表示させる事も可能です。

<ul>
<li><a data-fancybox="etc" data-caption="キャプション inline" data-type="inline" href="#hidden-content">iframe</a></li>
<li><a data-fancybox="etc" data-caption="キャプション iframe" data-type="iframe" href="samplepage.html">iframe</a></li>
<!-- ajax読み込みの場合は、hrefでは無くdata-src で読み込みます-->
<li><a data-fancybox="etc" data-caption="キャプション ajax" data-type="ajax" data-src="samplepage.html">ajax</a></li>
<li><a data-fancybox="etc" data-caption="キャプション HTML" data-type="html" href="samplepage.html">ajax</a></li>
</ul>

<div style="display: none;" id="hidden-content">
<h2>インライン要素</h2>
<p>スタイルで display: none; とし隠しています。</p>
</div>

色々なコンテンツをオーバーレイ表示させる『fancybox3』動作デモはこちら

ちなみに、通常の画像については data-typeは不要で動作しますが data-type=”image” とする事で若干処理が早くなるようです。data-typeには『image』『inline』『ajax』『iframe』『html』の5種が指定できますが、リンクしているコンテンツタイプと指定が間違っているとエラーが表示されるので注意しましょう。

※ローカル環境では、セキュリティ設定によってはajax、iframなどはが動作しませんので、どうしてもうまく行かない場合はwebサーバーにアップロードの上で試してみましょう。

その他オプションなどについて

その他にも、各種設定をオプションで調整可能です。
下記のようにfancyboxの記述に含めていきます。

<script>
$(document).ready(function() {
	$('[data-fancybox]').fancybox({
		// オプションを下記に記載していきます
		loop : true, // 複数画像表示時に最初と最後をループさせる
		toolbar  : false, // ツールバーの非表示
		smallBtn : true, // 小さいCloseボタン利用する
		iframe : { // iframe 関連の処理 
			preload : false //iframeのプリロードをしない
		}
	});
});
</script>
オプション名 初期値 概要
loop false 複数画像表示時に最初と最後をループさせる
margin [44, 0] 画像の周りのマージン
ズームイン時、ビューポートが800px以下の場合は適応されない
gutter 50 スライドとスライドの間の水平方向の間隔
keyboard true キーボードナビゲーションを有効にするか否か
arrows true 画面端に矢印のナビゲーションを表示するか否か
infobar false 上部にインフォメーションバーを表示するか否か
toolbar true ツールバーを表示するか否か
idleTime 4 スライド移動までの待機時間
smallBtn auto 右上Closeボタンを小さいタイプで表示するか否か
protect false 右クリックを無効にするか否か
modal false コンテンツをモーダル化するか否か
animationEffect zoom 画像ズーム時のアニメーションの種類
false、zoom、fade、zoom-in-out
animationDuration 366 ズーム時のアニメーションにかかる時間
zoomOpacity auto 画像クリック後のズームアニメーション自の透明度
transitionEffect fade スライド時のアニメーション効果の種類。
false、fade、slide、circular、tube、zoom-in-out、rotate
transitionDuration 366 スライド時のアニメーションにかかる時間
slideClass スライド要素のカスタムCSSクラスを指定
baseClass レイアウトのためのカスタムCSSクラスを指定
parentEl ‘body’ コンテナの基準となる親要素
autoFocus true ズーム実行時にフォーカス可能要素に自動的にフォーカスするか否か
backFocus true ズームを閉じたとき、それまでのページの
フォーカス可能な要素にフォーカスするか否か
trapFocus true ズーム要素外にフォーカスさせるか否か
hash null ズーム時にURLに特定のハッシュタグをつける場合に指定
clickSlide close 画像をクリックした時の挙動についての設定
clickOutside close 画像以外をクリックした時の挙動についての設定
dblclickSlide false 画像をダブルクリックした時の挙動についての設定
dblclickOutside false 画像以外をダブルクリックした時の挙動についての設定

まとめ ライセンスについて

如何でしたでしょうか。実際に設置してみると驚くほど簡単に利用でき、表示関連も万全なfancybox3。

冒頭でも触れましたが、スマートフォン対応内容が素晴らしく、設置者は一切のカスタマイズをせずどんな環境でもストレスなく表示可能です。

ギャラリー機能やUIのカスタマイズもオプション設定で融通が効き、CMSへ組み込んだり、多数のメディアを掲載する必要があるwebサイト構築時には、制作者の作業負担が極端に軽減する事でしょう。

まさにプロユースのjQueryプラグイン。

なお、fancyBox3はGPLv3ライセンスで配布されています。
商用サイト、テーマやアプリケーションに利用する際にはライセンス購入が必要です。

fancyBox is licensed under the GPLv3 license for all open source applications.
A commercial license is required for all commercial applications (including sites, themes and apps you plan to sell).

商用シングルライセンスは$29 。
件数無制限で1年のサポート付きのものが$119 なので業務や規模にあわせて選択しましょう。業務で利用するならば後者でも十分お得かと。

ライセンスについては公式サイトを必ず確認してください。

スポンサーリンク
記載内容につきまして

掲載記事に関しまして

当サイトの掲載記事は、UZUERA.NETスタッフやパートナーライターの主観によって執筆しています。内容については、実際の事象やスペック、用途と異なる場合がございます。
また記載する製品やサービスの内容が正式スペックや保証範囲の適用外となる場合もありますので、あらかじめご了承ください。

この記事をSNSでシェア