LoginSignup
0
0

More than 3 years have passed since last update.

画像複数枚ポップアップ

Last updated at Posted at 2021-02-22

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0