ゆくりえのラウンジで使用。 loung/index.html

desktop/webコンテンツツール/jQuery/レスポンシブスマホ対応ライトボックスfancybox-master

https://uzurea.net/explanation-of-fancybox3/

ダウンロードした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です。

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

その他にも、各種設定をオプションで調整可能です。
下記のように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	画像以外をダブルクリックした時の挙動についての設定

ゆくりえ　ラウンジでのコード

<!– InstanceBeginEditable name=”head” –>

<!– InstanceEndEditable –>

</div>

</div>
</div>

カテゴリー: fancyBox3

スマホ対応　レスポンシブライトボックス　fancyBox3

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

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

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

ゆくりえ　ラウンジでのコード

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

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

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

ゆくりえ ラウンジでのコード

ゆくりえ　ラウンジでのコード