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>
オプションについて
オプションについてはこちらのページを参照。
関連記事
-
-
javascriptで画像を取り扱う際の注意
javascriptで画像を取り扱う際に、 ちゃんと要素を指定しているのにも関わ ...
-
-
PHPで画像を分割し並べ替えて出力したものをJavaScriptで復元する方法
ある電子書籍サイトをブラウザの開発者ツールで見てみたところ、PHPでページ画像を ...
-
-
フォームで画像をとりあつかう際にBase64エンコードした上で送信する方法
PHP等サーバサイド系の言語は利用不可(JSは利用可)な環境でformを作成し画 ...
-
-
バニラJS対応(jQuery非依存)の画像スライダー系プラグイン「Flickity」の利用方法
画像スライダーを設置する場合「slick」プラグインを利用することが多い。ただ、 ...
-
-
サムネイルをクリックすると拡大画像を表示できる「Lightbox」の利用方法
画像をサムネイル表示してクリックしたら大きく表示する というのがLightbox ...