ライトボックスだとスマホ表示のときがあまり気に入らず
もっといいかんじのプラグインはないかな～と探し回ったところ見つけた「baguetteBox.js」。
私の中での決め手は、
スマホ表示のときに画像が横100％で表示されるところと
もちろんスワイプ対応、そして画像を非表示にするときにスワイプで消せることができるところでした！
そして設置がまずすごく簡単なのに最低限でいいかんじでした。
前からあったんだと思いますが出会えて良かった！
これから活躍してくれそうです。
baguetteBox.jsの使い方
使い方と言ってもびっくりするくらい簡単です。
ダウンロード
まずここからダウンロードをしてきます。
解凍したらdistフォルダに入っているファイルを使います。
minが付いているファイルは圧縮されたものになるのでカスタマイズを特にしないのであればminを選んでOKです。
使うのはcssとjsの2ファイルです。
- baguetteBox.css
- baguetteBox.js
- baguetteBox.min.css
- baguetteBox.min.js
baguetteBox.jsの読み込み、実装
クラスにgalleryに仮でしていますが、idでもなんでもOKです。
<link rel="stylesheet" type="text/css" href="css/baguetteBox.css" media="all" />
<script src="js/baguetteBox.min.js"></script>
<script>
window.onload = function() {
baguetteBox.run('.gallery');
};
</script>
上記でつけたclassでマークアップする
<ul class="gallery">
<li><a href="拡大画像のURL"><img src="サムネイル画像のURL" /></a></li>
<li><a href="拡大画像のURL"><img src="サムネイル画像のURL" /></a></li>
<li><a href="拡大画像のURL"><img src="サムネイル画像のURL" /></a></li>
</ul>
これだけで設置完了です。簡単すぎ！
今回ulをつかってますが、divでもなんでもOKです。
スクリプトで指定したクラスで囲めばその中にあるaタグがライトボックスのようになります。
お手軽で便利ですね！
今回は最低限の設置方法のメモでした。