ポップアップの定番、fancyboxの最新版がリリースされています。
（執筆時点でv3.1）
レスポンシブにも対応し、今までとデザインも設定も一新されましたので、利用できるオプションをまとめました。
fancybox3の公式サイト
[adsense]
オプション一覧
defaults = {
// ギャラリー表示の際ループさせる
loop : false,
// 画像のマージンの取り方、ズームイン時、ビューポートが800pxより小さい場合は無視されます。
margin : [44, 0],
// スライド間の水平スペース
gutter : 50,
// キーボード操作を有効にする
keyboard : true,
// 画面の端にナビゲーション矢印を表示する
arrows : true,
// 情報バーの表示 (上部に1/10のような数字と矢印が表示されます)
infobar : false,
// ツールバーを表示 (上部にボタンが表示)
toolbar : true,
// 右上隅に表示されるボタン
// ボタンのデザインは「btnTpl」オプションのテンプレートを使用して作成されます
// (class="fancybox-toolbar"で要素を指定)
buttons : [
'slideShow',
'fullScreen',
'thumbs',
'close'
],
// スライドの待ち時間（単位は秒）
idleTime : 4,//4秒
// コンテンツの右上隅にボタンを表示する
// 'auto'の場合、 'html'、 'inline'または 'ajax'のコンテンツを持つコンテンツ用に作成される
// カスタマイズする場合、「btnTpl.smallBtn」のテンプレートを使用する
smallBtn : 'auto',
// 右クリックを無効にして画像に簡単な画像保護を使用する
protect : false,
// コンテンツを"モーダル（ポップアップ時に元の要素が操作不可になるやつ）"にするショートカット。
// 例えばキーボードナビゲーションを無効にする、ボタンを非表示にするなどの効果がある
modal : false,
image : {
// 表示する前に画像が読み込まれるのを待つ
preload : "auto",
},
ajax : {
// ajaxリクエストの設定を含むオブジェクト
settings : {
// This helps to indicate that request comes from the modal
// 名前を自由に変更できます
data : {
fancybox : true
}
}
},
iframe : {
// iframeテンプレート
tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
// iframeをプレロードしてから表示する
// iframeコンテンツの幅と高さを計算できます
// (クロスドメインデータを取得することはできないので注意)
preload : true,
// iframeラッピング要素用のCSSをここに記述できる
// 例えば、iframeのカスタム寸法を設定したりできる
css : {},
// iframeタグの属性
attr : {
scrolling : 'auto'
}
},
// ポップアップ時のアニメーションタイプ
// 設定可能な値:
// false - 無効
// "zoom" - サムネイルからズーム（デフォルト）
// "fade" - フェードイン・アウト
// "zoom-in-out" - ズームイン・アウト
//
animationEffect : "zoom",
// ポップアップ時のアニメーション時間（ミリ秒）
animationDuration : 366,
// 拡大中に不透明度を変更する必要がある場合
// 不透明度が 'auto'の場合、画像とサムネイルのアスペクト比が異なると不透明度が変更される
zoomOpacity : 'auto',
// スライド時のアニメーション効果
// 設定可能な値:
// false - 無効
// "fade' - フェード
// "slide' - スライド（デフォルト）
// "circular' - 円
// "tube' - チューブ
// "zoom-in-out' - ズームイン・アウト
// "rotate' - 回転
//
transitionEffect : "fade",
// スライド時のアニメーション時間（ミリ秒）
transitionDuration : 366,
//スライド要素のカスタムCSSクラス
slideClass : '',
// レイアウト用のカスタムCSSクラス
baseClass : '',
// レイアウトのベーステンプレート
baseTpl :
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
'<button data-fancybox-prev title="{{PREV}}" class="fancybox-button fancybox-button--left"></button>' +
'<div class="fancybox-infobar__body">' +
'<span data-fancybox-index></span> / <span data-fancybox-count></span>' +
'</div>' +
'<button data-fancybox-next title="{{NEXT}}" class="fancybox-button fancybox-button--right"></button>' +
'</div>' +
'<div class="fancybox-toolbar">' +
'{{BUTTONS}}' +
'</div>' +
'<div class="fancybox-navigation">' +
'<button data-fancybox-prev title="{{PREV}}" class="fancybox-arrow fancybox-arrow--left" />' +
'<button data-fancybox-next title="{{NEXT}}" class="fancybox-arrow fancybox-arrow--right" />' +
'</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption-wrap">' +
'<div class="fancybox-caption"></div>' +
'</div>' +
'</div>' +
'</div>',
// インジケータテンプレートを読み込む
spinnerTpl : '<div class="fancybox-loading"></div>',
// エラーメッセージテンプレート
errorTpl : '<div class="fancybox-error"><p>{{ERROR}}<p></div>',
btnTpl : {
slideShow : '<button data-fancybox-play class="fancybox-button fancybox-button--play" title="{{PLAY_START}}"></button>',
fullScreen : '<button data-fancybox-fullscreen class="fancybox-button fancybox-button--fullscreen" title="{{FULL_SCREEN}}"></button>',
thumbs : '<button data-fancybox-thumbs class="fancybox-button fancybox-button--thumbs" title="{{THUMBS}}"></button>',
close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}"></button>',
// This small close button will be appended to your html/inline/ajax content by default,
// if "smallBtn" option is not set to false
smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>'
},
// コンテナの基準となる親要素
parentEl : 'body',
// フォーカス処理
// ==============
// 開いた後最初のフォーカス可能な要素に焦点を当ててみる
autoFocus : true,
// 閉じるとアクティブな要素にフォーカスを戻す
backFocus : true,
// ユーザーがポップアップコンテンツ以外の要素にフォーカスすることを許可しない
trapFocus : true,
// モジュール固有のオプション
// =======================
fullScreen : {
autoStart : false,
},
touch : {
vertical : true, //コンテンツを垂直方向にドラッグできるようにする
momentum : true //パニング時にマウス/タッチを離した後、動きを続ける
},
// ポップアップ時、URLにハッシュタグがつく機能。falseでOFFになる
hash : null,//falseでオフにできる
// 新しいメディアタイプをカスタマイズまたは追加する
// 例えばyoutubeのメディアタイプを作り、オプションを設定することができる
/*
media : {
youtube : {
params : {
autoplay : 0 //自動再生
}
}
}
*/
media : {},
slideShow : {
autoStart : false,
speed : 4000
},
thumbs : {
autoStart : false, // オープニングにサムネイルを表示する
hideOnClose : true // 閉じるアニメーションの際にサムネイルグリッドを非表示にする
},
// コールバック
//==========
// 詳細はDocumentation / API / Eventsを参照してください
// 例:
/*
afterShow: function( instance, current ) {
console.info( 'Clicked element:' );
console.info( current.opts.$orig );
}
*/
onInit : $.noop, //インスタンスが初期化されたときに実行
beforeLoad : $.noop, // スライドのコンテンツを読み込む前に実行
afterLoad : $.noop, // スライドの内容が読み込まれたときに実行
beforeShow : $.noop, // ポップアップアニメーションが始まる前に実行
afterShow : $.noop, // コンテンツの読み込みとポップアップアニメーションが完了したら実行
beforeClose : $.noop, // ポップアップを閉じようとする前。 閉じるをことをキャンセルした場合、falseを返します。
afterClose : $.noop, // ポップアップを閉じたあとに実行
onActivate : $.noop, // インスタンスが前面に来るとき
onDeactivate : $.noop, // 他のインスタンスが起動されているとき
// インタラクション
// ===========
// ユーザーがfancyBox領域をクリックまたはダブルクリックしたときに実行するアクションをカスタマイズできる。
// 各オプションは、値を返す文字列またはメソッド。
//
// 可能な値:
// "close" - インスタンスを閉じる
// "next" - 次のギャラリーアイテムに移動
// "nextOrClose" - 次のギャラリーアイテムに移動するか、ギャラリーに1つのアイテムしかない場合は閉じる
// "toggleControls" - コントロールの表示/非表示
// "zoom" - ズームイメージ（ロードされている場合）
// false - 何もしない
// fancyBox領域をクリックした時
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// 画像上をクリックした時
clickSlide : 'close',
// 画像以外（背景）をクリック
clickOutside : 'close',
// 前の2つと同じですが、ダブルクリックの場合
dblclickContent : false,
dblclickSlide : false,
dblclickOutside : false,
// モバイルデバイスが検出されたときのカスタムオプション
// =============================================
mobile : {
clickContent : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : false;
},
clickSlide : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : "close";
},
dblclickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
dblclickSlide : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
}
},
// 国際化
// ============
lang : 'en',
i18n : {
'en' : {
CLOSE : 'Close',
NEXT : 'Next',
PREV : 'Previous',
ERROR : 'The requested content cannot be loaded. <br/> Please try again later.',
PLAY_START : 'Start slideshow',
PLAY_STOP : 'Pause slideshow',
FULL_SCREEN : 'Full screen',
THUMBS : 'Thumbnails'
},
'de' : {
CLOSE : 'Schliessen',
NEXT : 'Weiter',
PREV : 'Zurück',
ERROR : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
PLAY_START : 'Diaschau starten',
PLAY_STOP : 'Diaschau beenden',
FULL_SCREEN : 'Vollbild',
THUMBS : 'Vorschaubilder'
}
}
有用な記事をありがとうございます。
非常に参考になりました。
もしご存じでしたらご教示いただければと思うのですが、
スマートフォンで表示した際に、コンテンツ右上の「閉じる」ボタンが表示されないようです。
こちらは、何かオプションの項目で表示可能になるのでしょうか？
Google Chromeの検証ツールでは、「閉じる」ボタンが表示されるときもあるようで、
？マークが飛び交っております。＾＾；
コメントありがとうございます。
私の環境で確認しましたが、PC、スマホ関係なく表示されています。
スマホだけで起きるということは、何かレスポンシブの設定をしているか、
fancybox以外でのレスポンシブの設定に影響を及ぼすものがあるのかもしれません。
以下のあたりを確認されると良いかもしれません。
・jqueryやfancyboxは最新のバージョンか
・fancyboxのオプション設定に何か記述を加えていないか
・他のjsや、cssなど外部からの影響はないか