单个预览 HTML / CSS / JS 后的多个图像库答案

【问题标题】：Multiple images gallery after a single preview HTML / CSS /JS单个预览 HTML / CSS / JS 后的多个图像库
【发布时间】：2021-05-02 21:25:27
【问题描述】：

我想从一个“预览”创建一个包含多个图像的画廊。我会更好地解释。假设我有 3 张不同的图像，它们是 3 种不同的产品。通过单击其中的每一个，我想为每个产品打开一个包含 x 个图像的画廊（每个预览都不同）。我尝试使用LIGHTBOX by Lokesh Dhakar 创建它，但每个预览只能有一张图片，而画廊只有一张。我已经尝试了几次，但我无法变得更好这是我的代码，希望有人有一些想法

<html>
<head>
<title>IMAGE GALLERY</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/lightbox.min.css">
    <script type="text/javascript" src="js/lightbox-plus-jquery.min.js">
    </script>
</head>
<body>
<h1> Image Gallery Design</h1>

    <div class="gallery">
    <a href="IMAGE1.png" data-lightbox="mygallery" data-title="Product1"><img src="PREVIEW1.png"></a>
    <a href="IMAGE2.png" data-lightbox="mygallery" data-title="Product2"><img src="PREVIEW2.png"></a>
    <a href="IMAGE3.png" data-lightbox="mygallery" data-title="Product3"><img src="PREVIEW3.png"></a>
    </div>
</body>
</html>

body{
    font-family: sans-serif;
}
h1{
    text-align: ceter;
    color: forestgreen;
    margin: 30px 0 50px;
}

.gallery img{
    filter: grayscale(100%);
    transition: 1s;
}
.gallery img:hover{
    filter: grayscale(0);
    transform: scale(1.1);
}

【问题讨论】：

标签： javascript html css gallery

【解决方案1】：

隐藏同一集合中的其他 <a> 元素 使用类似 u-none 的 CSS Utility 类来执行 display: none;
仅将<img> 用于第一组缩略图

lightbox.option({
  resizeDuration: 200,
  wrapAround: true
});

.u-none {display: none;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.css" rel="stylesheet" type="text/css" />

<a href="https://placehold.it/500x500/f0b&text=A1" data-lightbox="set_1">
  <img src="https://placehold.it/100x100/f0b&text=A1">
</a>
<a href="https://placehold.it/500x500/bf0&text=A2" class="u-none" data-lightbox="set_1"></a>
<a href="https://placehold.it/500x500/0bf&text=A3" class="u-none" data-lightbox="set_1"></a>
<a href="https://placehold.it/500x500/b0f&text=A4" class="u-none" data-lightbox="set_1"></a>

<a href="https://placehold.it/500x500/f0b&text=B1" data-lightbox="set_2">
  <img src="https://placehold.it/100x100/0bf&text=B1">
</a>
<a href="https://placehold.it/500x500/0bf&text=B2" class="u-none" data-lightbox="set_2"></a>
<a href="https://placehold.it/500x500/bf0&text=B3" class="u-none" data-lightbox="set_2"></a>
<a href="https://placehold.it/500x500/0fb&text=B4" class="u-none" data-lightbox="set_2"></a>

<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

或将所有隐藏集图像包装在一个公共父级<div> 中，并使用u-none 类。

【讨论】：