我想创建一个包含多个图像的图库，从一个"预览"开始。我会解释得更好。假设有3个不同的图像代表3个不同的产品。通过点击其中的每一个，我想打开一个画廊(不同的每个预览)x图像为每个单一的产品。我试着用Lokesh Dhakar的LIGHTBOX来创建它，但是每次预览我只能有一个图像，而且图库也只有一个。我已经试了好几次了，但我一点也没进步这是我的代码，希望有人有一些想法
<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);
}
-
隐藏同一集合的其他
<a>元素使用像u-none这样的CSS实用程序类来做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>或将所有隐藏的集合图像与u-none类一起包裹在一个共同的父<div>中。