やっぱりこっち使う。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