【Luminous.js】jQuery非依存で軽く使いやすい画像拡大javaScriptプラグイン

こんにちは、ハル@haru_elpisです。

画像拡大のプラグインの中で軽く使いやすいLuminous.jsの紹介です。

Luminous.jsの使い方

ダウンロード

GitHub - imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox

A simple, lightweight, no-dependencies JavaScript lightbox - GitHub - imgix/luminous: A simple, lightweight, no-dependencies JavaScript lightbox

github.com

ダウンロードしたファイルの「luminous.min.js」・「luminous-basic.min.css」ファイルをjsフォルダなど任意の場所へ移動しておきましょう。

HTML head

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/luminous-basic.min.css">
<script src="./js/luminous.min.js"></script>

HTML body

<a class="zoom_normal" href="拡大画像のパス">
  <img src="サムネイル画像のパス">
</a>

JavaScript

new Luminous(document.querySelector(".zoom_normal"));