單次預覽后的多個圖片庫 HTML / CSS /JS

Question

我想從一個“預覽”創建一個包含多個圖像的畫廊。 我會解釋得更好。 假設我有 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);
}

Answer 1

使用 CSS Utility class隱藏同一組的其他<a>元素，如u-none 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 class 將所有隱藏集圖像包裝在一個公共父<div>中。

單次預覽后的多個圖片庫 HTML / CSS /JS

問題描述

1 個解決方案

解決方案1
0 2021-01-28 23:07:58

單次預覽后的多個圖片庫 HTML / CSS /JS

問題描述

1 個解決方案

解決方案1 0 2021-01-28 23:07:58

解決方案1
0 2021-01-28 23:07:58