I want to create a gallery of multiple images, from a single "preview". I'll explain better. Let's say I have 3 different images which are 3 different products. By clicking on each of these, I would like to open a gallery (different for each preview) of x images for each single product.
I tried to create it using LIGHTBOX by Lokesh Dhakar, but I can only have one image for each single preview and the gallery is only one.
I have tried several attempts, but I can't get any better
Here is my code, hope someone has some ideas
<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);
}
question from:
https://stackoverflow.com/questions/65946337/multiple-images-gallery-after-a-single-preview-html-css-js 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
