勉強したことのメモ

Webエンジニア / プログラマが勉強したことのメモ。

LightboxをjQuery無しで実装できる「Luminous」の利用方法

  JavaScript

あるサイトのコーディングデータを貰った際、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で画像読み込み完了のタイミングを検知する「imagesLoaded」ライブラリの利用方法

大き目のサイズの画像をページに設置すると読み込み完了まで時間がかかる。その画像が ...

Ajaxでプラグイン無しのファイルアップロード方法

画像ファイルを添付できて、尚且つAjaxを用いた非同期通信のフォームを作りたかっ ...

Lightboxで画像拡大時にダウンロードリンクを設置する方法

Lightboxで画像拡大時にダウンロードリンクを設置したいと要望を受けた。もち ...

ライブラリ等を使用せずファイルをドラッグ&ドロップでアップロードする方法

formにドラッグ&ドロップでファイルをアップロードする機能を実装する場 ...

「slick」でブラウザ幅がPCの場合はスライダーを表示し、スマホ幅の場合はスライダー無しにする方法

slickプラグインで画像スライダーを設置しているページがあり、PCのブラウザ幅 ...