モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション モバイル対応も万全のLightbox 『fancyBox3』の使い方とオプション Eazy-T 公開:2017年8月22日（7年前） / 更新:2022年9月7日 コメント 0件 Web技術htmljQueryweb SNS X Facebook Ｂ! はてブ Pocket 当記事の内容および記事中のリンクには、広告目的や当サイトが収益を得るためのものが含まれており、これらの収益によってuzurea.netは運営されています。 Lightboxなどに代表される、画像やビデオをページを推移せずにオーバーレイ表示させる機能は、昨今のwebサイトでは必須の技術と言っても良いでしょう。 現在、jQueryプラグインとしてさまざまなオーバーレイ プログラムが提供されていますが、中でも設定の簡単さとオプションの充実度、そしてスマートフォンにもレスポンシブも万全さという面でお勧めしたいのが今回解説する『fancyBox3』です。 その名の通り以前から公開されているfancyBoxシリーズの3世代目となる同プラグイン。その設置手順を動作デモ付きで解説していきます。 記事の索引1 『fancyBox3』の主な機能と特徴1.1 モバイルファースト2 fancyBox3の設置手順2.1 必要最低限の記述で『fancyBox3』を設置2.2 複数の画像をグループ化させる2.3 YouTube、Vimeo、googleマップ表示や、inline、iframe、ajax 読み込み2.4 その他オプションなどについて3 まとめ ライセンスについて 『fancyBox3』の主な機能と特徴 まずはfancyBox3の主な機能と特徴をピックアップしてみましょう。 モバイルファースト設置、設定が簡単分かりやすくて便利なUIYouTubeやVimeoやGoogleマップ、Instagramなどの対応画像はもちろん、inline要素、Ajaxロード、iframeにも対応 およそ昨今のwebサイト構築時に必要とされる基本機能と、さらに痒い所に手が届くアレコレが網羅されています。 特に個人的には、サムネイルの画像をタップしたときに、サムネイルからニュルッと拡大してくるようなズーム・アニメーション処理(※）の有無がついているオーバーレイ機能が好きです。感覚的に判りやすいですし。UXの観点からもわりと重要だと思うんですよね。 ※余談ですがこういったUIを実装した最初の実用的なLightbox系にHighslide JSというのがありました。すでに開発は終わっていてモバイル対応などされていませんが、ズーム・アニメーションの他にも、拡大した後の画像を画面上で自由ドラッグできたりと中々革新的で心地いいスクリプトでした。） つづいて以下に、解説をしていきましょう。 モバイルファースト fancybox3はこれまでのlightbox系の画像オーバーレイプラグインと比べ、スマートフォンでの表示が便利に設計されています。 スマートフォン レスポンシブ環境に完全対応する事を念頭に開発されているので、オーバーレイするメディアや、ユーザーの環境……特にスマートフォンタやブレット環境での操作感は抜群で、特定の動作での表示がずれたりしません。 左右へのスワイプ機能で画像ギャラリーを遷移させたり、上下へのスワイプや画像以外の領域のタップでオーバ―レイを解除したりと、一般的なユーザーでも感覚的に使えるよう丁寧に作られています。 例えば、オーバーレイ後にさらにピンチ操作で拡大縮小しますが、その際表示されている画面全体が拡大するのではなく、画像のみが拡大しfancyBox3のUIなどはそのまま維持されます。 そしてオーバーレイした画像をさらにタップする事で、ナビゲーションが非表示になって画像をオリジナルサイズ表示で最大化する。 ……といった感覚的にわかりやすい操作がデフォルトで実装されています。 この辺りを他のプラグイン+カスタマイズを試行錯誤した事がある方なら分かると思いますが、結構しんどいんですよね。 fancyBox3の設置手順 それでは、fancyBox3の設置方法を解説していきましょう。 まずは『fancyBox3』のオフィシャルサイトからデータ一式をダウンロードしましょう。 『fancyBox3』のオフィシャルサイト ページ上部中にある『DOWNLOAD』をクリックし、ローカルにデータ一式のzipファイルを保存します。 fancybox3オフィシャルサイト ダウンロードしたzipアーカイブを解凍し、/dist 中に格納されているファイルを使用します。 /dist 内に格納されている…… 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) ¥2,799 (2024/07/27 13:36:07時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す jQuery最高の教科書 ¥2,700 (2024/07/27 13:36:08時点 Amazon調べ-詳細) Amazonでのレビューを見る Amazonで探す 楽天市場で探す Yahoo!ショッピングで探す メルカリで探す
