ゆくりえのラウンジで使用。 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” –>
<link rel=”stylesheet” type=”text/css” href=”../css/jquery.fancybox.css”>
<!– InstanceEndEditable –>
<div class=”container-fluid area1″>
<div class=”container”>
<div class=”row justify-content-center mb-5″>
<script src=”../js/jquery.fancybox.min.js”></script>
<script>
$(document).ready(function() {
$(‘[data-fancybox]’).fancybox({
// オプションを下記に記載していきます
loop : true, // 複数画像表示時に最初と最後をループさせる
toolbar : false, // ツールバーの非表示
smallBtn : true, // 小さいCloseボタン利用する
iframe : { // iframe 関連の処理
preload : false //iframeのプリロードをしない
}
});
});
</script>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item5b.jpg” data-fancybox=”group”><img src=”../image/lounge/item5s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item6b.jpg” data-fancybox=”group”><img src=”../image/lounge/item6s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item7b.jpg” data-fancybox=”group”><img src=”../image/lounge/item7s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item8b.jpg” data-fancybox=”group”><img src=”../image/lounge/item8s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
<div class=”caption”></div>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item9b.jpg” data-fancybox=”group”><img src=”../image/lounge/item9s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item10b.jpg” data-fancybox=”group”><img src=”../image/lounge/item10s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item11b.jpg” data-fancybox=”group”><img src=”../image/lounge/item11s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item12b.jpg” data-fancybox=”group”><img src=”../image/lounge/item12s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item13b.jpg” data-fancybox=”group”><img src=”../image/lounge/item13s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item14b.jpg” data-fancybox=”group”><img src=”../image/lounge/item14s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item15b.jpg” data-fancybox=”group”><img src=”../image/lounge/item15s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
<div class=”col-lg-3 col-md-4 col-6 mb-4″ >
<a href=”../image/lounge/item16b.jpg” data-fancybox=”group”><img src=”../image/lounge/item16s.jpg” class=”img-fluid mx-auto d-block” alt=””/></a>
</div>
</div>
</div>
</div>