Multiple images gallery after a single preview HTML / CSS /JS
Question
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);
}
1 answers
solution1
0 2021-01-28 23:07:58
- Hide the other
<a>elements of the same set using a CSS Utility class likeu-nonethat doesdisplay: none; - Use
<img>only for the first set thumbnail
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>
or wrap all the hidden set images inside a common parent <div> with that u-none class.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.