＜jQuery非依存＞画像モーダル拡大プラグイン baguettebox.js
jQuery非依存の画像拡大プラグインを探してて、baguettebox.jsを見つけ、
しばらく使ってみていいなと思ったので、これを使っていこうと思います。
※jQueryきらいなわけじゃない。でもいつでも使えるわけじゃないので。
これの前はlightbox2を使っていて、エフェクトの感じが好みだったので、似ているものを探していました。
決めた理由は下記です。
- オプションがそこそこ充実
- 画像がしっかり拡大できて、フルスクリーンで見れる
- ボタンなどの画像をダウンロードしなくても使える
- アクセシビリティへの配慮
その他、スワイプに対応・キャプションサポートなど、最低限ここは…というポイントも押さえられています。
インストール
npm i baguettebox.jsCDNもあります。
下記から最新バージョンをコピーし、
https://cdnjs.com/libraries/baguettebox.js
それぞれURLを下記に貼り付け。
<link rel="stylesheet" href="<CSS URL>">
<script src="<JS URL>" async></script>HTML
aタグをラップしている要素に、任意のクラスをつけておきます。
キャプションをつけたい場合は、aタグにdata-caption属性を付与します。
<div class="runImageBox">
<a href="/img/sample1.png" data-caption="Image caption"><img src="/img/sample1.png" alt=""></a>
<a href="/img/sample2.png" data-caption="Image caption"><img src="/img/sample2.png" alt=""></a>
<a href="/img/sample3.png" data-caption="Image caption"><img src="/img/sample3.png" alt=""></a>
</div>JS
import baguetteBox from 'baguettebox.js';
import 'baguettebox.js/dist/baguetteBox.min.css';
const imageScale = () => {
baguetteBox.run('.runImageBox', {
animation: 'fadeIn',
});
}
window.addEventListener('load', function() {
imageScale();
});animationにはslideIn、fadeIn、falseを指定できます。
デフォルトではスライドになっています。
ラップしている要素にクラスを付与するため基本的には子要素すべてのaタグが対象になりますが、対象外にするクラスを定義するignoreClassというオプションもあります。
その他オプションやAPIはこちら
公式Github - Customization
感想
画像拡大プラグインは自作するのは結構手間がかかるけど、使うことが多いので助かります。
