やっぱりこっち使う。jQuery使わないから軽い

index.html


<a href="[画像ファイル]" class="luminous"><img src="[画像ファイル]"></a>

<link rel="stylesheet" href="Luminous-basic.min.css">
<script src="Luminous.min.js"></script>
<script>
new LuminousGallery(document.querySelectorAll('.luminous'));
</script>

Luminousの配布ページ
https://github.com/imgix/luminous

ありがとうございます
https://web-roku.com/luminous
https://blog.ver001.com/javascript-luminous/

ーーーーーーーーーーーーーーーーーーーーーー
ーーーーーーーーーーーーーーーーーーーーーー

以下前の

index.html


<head>
　<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
　<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
　<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>
</head>

<body>
<a href="gazou1.jpg" data-lightbox="group"><img src="gazou1.jpg" width="300"></a>
</body>

そして、この場合、「data-lightbox="group"」という形で、「data-lightbox」で指定する名前（ここでは group）を一緒にすることで、画像をグルーピングすることができます。

ありがとうございます！
https://toretama.jp/click-big-image-floaty.html