モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション
モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション

モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション

Eazy-T アイコン

Eazy-T

公開:2017年8月22日（6年前） / 更新:

コメント 0件
Web技術
htmljQueryweb

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

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

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

『fancyBox3』の主な機能と特徴

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

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

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

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

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

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

モバイルファースト

fancybox3はこれまでのlightbox系の画像オーバーレイプラグインと比べ、スマートフォンでの表示が便利に設計されています。

スマートフォン

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

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

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

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

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

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

fancyBox3の設置手順

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

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

『fancyBox3』のオフィシャルサイト

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

fancybox3オフィシャルサイト
fancybox3オフィシャルサイト

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

/dist 内に格納されている……
/dist 内に格納されている……
cssとjsファイル1対を利用します
cssとjsファイル1対を利用します

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>
必要最低限な設定での 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({
		// オプションを下記に記載していきます
		animationEffect: "zoom-in-out", //アニメーションをズームインアウトに
		loop : true, // 複数画像表示時に最初と最後をループさせる
		toolbar  : false, // ツールバーの非表示
		smallBtn : true, // 小さいCloseボタン利用する
		iframe : { // iframe 関連の処理 
			preload : false //iframeのプリロードをしない
		}
	});
});
</script>
オプション名初期値概要
loopfalse複数画像表示時に最初と最後をループさせる
margin[44, 0]画像の周りのマージン
ズームイン時、ビューポートが800px以下の場合は適応されない
gutter50スライドとスライドの間の水平方向の間隔
keyboardtrueキーボードナビゲーションを有効にするか否か
arrowstrue画面端に矢印のナビゲーションを表示するか否か
infobarfalse上部にインフォメーションバーを表示するか否か
toolbartrueツールバーを表示するか否か
idleTime4スライド移動までの待機時間
smallBtnauto右上Closeボタンを小さいタイプで表示するか否か
protectfalse右クリックを無効にするか否か
modalfalseコンテンツをモーダル化するか否か
animationEffectzoom画像ズーム時のアニメーションの種類
“false”、”zoom”、”fade”、”zoom-in-out”
animationDuration366ズーム時のアニメーションにかかる時間
zoomOpacityauto画像クリック後のズームアニメーション自の透明度
transitionEffectfadeスライド時のアニメーション効果の種類。
“false”、”fade”、”slide”、”circular”、”tube”、”zoom-in-out”、”rotate”
transitionDuration366スライド時のアニメーションにかかる時間
slideClass”スライド要素のカスタムCSSクラスを指定
baseClass”レイアウトのためのカスタムCSSクラスを指定
parentEl‘body’コンテナの基準となる親要素
autoFocustrueズーム実行時にフォーカス可能要素に自動的にフォーカスするか否か
backFocustrueズームを閉じたとき、それまでのページの
フォーカス可能な要素にフォーカスするか否か
trapFocustrueズーム要素外にフォーカスさせるか否か
hashnullズーム時にURLに特定のハッシュタグをつける場合に指定
clickSlideclose画像をクリックした時の挙動についての設定
clickOutsideclose画像以外をクリックした時の挙動についての設定
dblclickSlidefalse画像をダブルクリックした時の挙動についての設定
dblclickOutsidefalse画像以外をダブルクリックした時の挙動についての設定

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

如何でしたでしょうか。実際に設置してみると驚くほど簡単に利用でき、表示関連も万全な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 なので業務や規模にあわせて選択しましょう。業務で利用するならば後者でも十分お得かと。

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

Web制作の現場で使うjQueryデザイン入門[改訂新版] (Web Professional Books)
¥3,278 (2023/03/24 08:51:33時点 Amazon調べ-詳細)

Amazonでのレビューを見る

jQuery最高の教科書
¥2,838 (2023/03/24 08:51:34時点 Amazon調べ-詳細)

Amazonでのレビューを見る

モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション

この記事をシェアする

この記事のタイトルとアドレスをコピー

この記事を気に入ったらハートマークで応援してください

この記事の執筆は……

Eazy-T アイコン

Eazy-T

ライター/webデザイナー。 平成元年に姿を現した80年代最後の刺客。柴咲コウの誕生日である8月5日に対して、彼は5月8日生まれ。澁澤龍彦と同じ誕生日で同じ名の母を持つ。西宮のトラビスと称して、モヒカンとM65をトレードマークに徘徊し、コカコーラや筒井康隆の新潮文庫の背表紙といった赤い物を求め彷徨っている。漢検5級。

, ,

page top