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>
オプションについて
オプションについてはこちらのページを参照。
関連記事
-
-
「slick」で作成したスライダー画像にランキングの順位を表示する方法
「slick」で作成したスライダー画像に対して、ランキングの順位を表示したいとい ...
-
-
ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法
formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...
-
-
バニラJS対応(jQuery非依存)の画像遅延読み込みプラグイン「echo.js」の利用方法
あるサイトをブラウザの開発者ツールで見ていると「echo.js」と聞いたことの無 ...
-
-
CKEditor5(WYSIWYGエディタ)に画像アップロード機能を追加する方法
CKEditor5(ウィジウィグエディタ)に画像アップロード機能を追加したい。公 ...
-
-
Lightboxで画像拡大時にダウンロードリンクを設置する方法
Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...