簡単な設定で実装できるギャラリープラグイン「Lightbox2」！
小さなサムネイル画像を拡大して表示させることができ、ちょっとしたスライドショーにもなるので大変重宝していました。
初めて実装した時は導入の簡単さと視覚効果のインパクトに感動したものです。
このプラグインの使い方は大変簡単なのですが、最近使う機会がありちょこちょこ調べていたので備忘録として残します。
正直、久々に使うまでオプションがあることを知りませんでした。。
まずは読み込みの設定
動作確認の時にはcdnが便利！
今までにjquery.jsを読み込んでいたcdnサーバが何度か落ちたことがあり、慌ててサーバにファイルをアップした記憶があります。
速度をとるか安定をとるか…これは臨機応変に対応ですね。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>
こんな感じでCSSとJSファイルを読み込みます。
※jQueryも必要です！
jQueryも含めると下記の記述になります。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css" integrity="sha512-ZKX+BvQihRJPA8CROKBhDNvoc2aDMOdAlcm7TUQY+35XYtrd3yh95QOOhsPDQY9QnKE0Wqag9y38OIgEvb88cA==" crossorigin="anonymous" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js" integrity="sha512-k2GFCTbp9rQU412BStrcD/rlwv1PYec9SNrkbQlo6RZCf75l6KcC3UwDY8H5n5hl4v77IDtIPwOk9Dqjs/mMBQ==" crossorigin="anonymous"></script>
拡大したい画像の設定
<a href="image.jpg" data-lightbox="example01" data-title="画像タイトル"> <img src="thumb_image.jpg" alt="サムネイル画像"> </a>
1つの画像を拡大したい時はこれだけです。
画像をaタグで囲んで「href」に表示させたい画像のパスを入れ、「data-lightbox」を追加するだけ。
サムネイル用の小さい画像と、拡大表示させる大きい画像の2種類を用意するのがページ読み込み時の負荷も少なく良いですね。
タイトルを付けたい時は「data-title」をaタグに追加すれば付けられます。
次はいくつかのまとまったギャラリーを読み込むとき（グループ化）です。
<a href="image01.jpg" data-lightbox="group01"> <img src="thumb_image01.jpg" alt="サムネイル画像01"> </a> <a href="image02.jpg" data-lightbox="group01"> <img src="thumb_image02.jpg" alt="サムネイル画像02"> </a> <a href="image03.jpg" data-lightbox="group01"> <img src="thumb_image03.jpg" alt="サムネイル画像03"> </a>
はい。
同じグループにしたい画像の「data-lightbox」を同じ名前にするだけでまとまってスライドショーが出来るようになるのです。
簡単です！
そしてオプション
なかなかオプションまで使わずとも十分な効果があるので良いのですが、
グループのスライドショーをループにしたい時があったりします。
<script>
lightbox.option({
'wrapAround': true
})
</script>
そんな時は、オプションメソッドを呼び出すだけで設定可能です。
上の記述でスライドショーがループするようになります。
久々に使ってみても簡単に実装できて良いです！
サムネイル画像を予め表示させることでページの軽量化もできるので使うシチュエーションもまだまだありそうです。
これでMIT Licenseというのもとてつもなく感謝です。
コメント