Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。
現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。
その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。
Index
『fancyBox3』の主な機能と特徴
まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。
- モバイルファースト
- 設置、設定が簡単
- 分かりやすくて便利なUI
- YouTubeやVimeoやGoogleマップ、Instagramなどの対応
- 画像はもちろん、inline要素、Ajaxロード、iframeにも対応
およそ昨今のwebサイト構築時に必要とされる基本機能と、さらに痒い所に手が届くアレコレが網羅されています。
特に個人的には、サムネイルの画像をタップしたときに、サムネイルからニュルッと拡大してくるようなズーム・アニメーション処理(※)の有無がついているオーバーレイ機能が好きです。感覚的に判りやすいですし。UXの観点からもわりと重要だと思うんですよね。
つづいて以下に、解説をしていきましょう。
モバイルファースト
fancybox3はこれまでのlightbox系の画像オーバーレイプラグインと比べ、スマートフォンでの表示が便利に設計されています。
レスポンシブ環境に完全対応する事を念頭に開発されているので、オーバーレイするメディアや、ユーザーの環境……特にスマートフォンタやブレット環境での操作感は抜群で、特定の動作での表示がずれたりしません。
左右へのスワイプ機能で画像ギャラリーを遷移させたり、上下へのスワイプや画像以外の領域のタップでオーバ―レイを解除したりと、一般的なユーザーでも感覚的に使えるよう丁寧に作られています。
例えば、オーバーレイ後にさらにピンチ操作で拡大縮小しますが、その際表示されている画面全体が拡大するのではなく、画像のみが拡大しfancyBox3のUIなどはそのまま維持されます。
そしてオーバーレイした画像をさらにタップする事で、ナビゲーションが非表示になって画像をオリジナルサイズ表示で最大化する。
……といった感覚的にわかりやすい操作がデフォルトで実装されています。
この辺りを他のプラグイン+カスタマイズを試行錯誤した事がある方なら分かると思いますが、結構しんどいんですよね。
fancyBox3の設置手順
それでは、fancyBox3の設置方法を解説していきましょう。
まずは『fancyBox3』のオフィシャルサイトからデータ一式をダウンロードしましょう。
ページ上部中にある『DOWNLOAD』をクリックし、ローカルにデータ一式のzipファイルを保存します。
ダウンロードしたzipアーカイブを解凍し、/dist 中に格納されているファイルを使用します。
jquery.fancybox.min.js や、jquery.fancybox.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>
複数の画像をグループ化させる
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です。
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>
ちなみに、通常の画像については data-typeは不要で動作しますが data-type=”image” とする事で若干処理が早くなるようです。data-typeには『image』『inline』『ajax』『iframe』『html』の5種が指定できますが、リンクしているコンテンツタイプと指定が間違っているとエラーが表示されるので注意しましょう。
※ローカル環境では、セキュリティ設定によってはajax、iframなどはが動作しませんので、どうしてもうまく行かない場合はwebサーバーにアップロードの上で試してみましょう。
その他オプションなどについて
その他にも、各種設定をオプションで調整可能です。
下記のようにfancyboxの記述に含めていきます。
<script>
$(document).ready(function() {
$('[data-fancybox]').fancybox({
// オプションを下記に記載していきます
animationEffect: "zoom-in-out", //アニメーションをズームインアウトに
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 なので業務や規模にあわせて選択しましょう。業務で利用するならば後者でも十分お得かと。
ライセンスについては公式サイトを必ず確認してください。