LightboxをjQuery無しで実装できる「Luminous」の利用方法
あるサイトのコーディングデータを貰った際、jQueryは使用していないのにLightboxが動作していた。何故動作しているのか調べたところ「Luminous」というライブラリを用いることでバニラJSでもLightboxが実装できるみたい。以下にサンプルとソースコードをメモ。
luminous
GitHub
https://github.com/strawdynamics/luminous
CDN
CDNで使う場合は以下を記述する。
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css">
異なるバージョンを使用したい場合は以下から探す。
https://cdnjs.com/libraries/luminous-lightbox
https://cdnjs.com/libraries/lightbox2
サンプル
https://taitan916.info/sample/luminous-lightbox/
実装方法
ソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>LightboxをjQuery無しで実装できる「Luminous」のサンプル</title> <style> .luminous img{ width: 100px; } </style> </head> <body> <div> <a href="./img/001.jpg" class="luminous"> <img src="./img/001.jpg"> </a> </div> <div> <a href="./img/002.jpg" class="luminous"> <img src="./img/002.jpg"> </a> </div> <div> <a href="./img/003.jpg" class="luminous"> <img src="./img/003.jpg"> </a> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/js/lightbox.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.4/css/lightbox.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/luminous-lightbox/2.4.0/luminous-basic.min.css"> <script> new LuminousGallery(document.querySelectorAll('.luminous')); </script> </body> </html>
画像拡大時の左右の「<」「>」リンクについて
画像拡大時の左右の「<」「>」リンクを非表示にしたい場合は以下をCSSで指定すること。
<style> .lum-gallery-button{ display: none; } </style>
オプションについて
オプションについてはこちらのページを参照。
関連記事
-
-
Chart.jsで描写したグラフを画像としてダウンロードさせる方法
サイト内にChart.jsでグラフを描写し、ボタンやリンクをクリックすることで当 ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
「slick」でarrows(次に進む・前に戻るボタン)を設定しても表示されない場合の対応方法
「slick」で画像スライダーを表示する際にarrows(次に進む・前に戻るボタ ...
-
-
「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法
slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...
-
-
Lightboxで文字をクリックしたら画像を表示させる方法
Lightboxを使用する際、一般的に使われているのはサムネイル画像をクリックす ...