(Html/css) 通过单击图库中的图像弹出图像 slider

Question

我有一个用于项目集合的网格图像库。 通过单击每个图像，我希望它有一个弹出图像幻灯片，显示更多不在图库中的图像。 因此，人们可以看到有关特定项目的更多详细信息。

是否可以使用 hrml/css/javascript 做到这一点？ 我在 Tumblr 上构建它，所以功能有限。 下面是网格图像库的非常基本的 html/css。 从那以后我应该如何继续？

 div.gallery { border: 20px solid #ccc; } div.gallery:hover { border: 20px solid #777; } div.gallery img { width: 100%; height: auto; } div.desc { padding: 15px; text-align: center; }.responsive { padding: 0 6px; float: left; width: 24.99999%; } @media only screen and (max-width: 700px) {.responsive { width: 49.99999%; margin: 6px 0; } } @media only screen and (max-width: 500px) {.responsive { width: 100%; } }.clearfix:after { content: ""; display: table; clear: both; }

 <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_1.jpg"> <img src="iimg_1.jpg" alt="Cat" width="600" height="600"> </a> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_2.jpg"> <img src=""img_2.jpg"" alt="Forest" width="600" height="600"> </a> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_3.jpg""> <img src="img_3.jpg" alt="Lights" width="600" height="600"> </a> </div> </div> <div class="responsive"> <div class="gallery"> <a target="_blank" href="img_4.jpg"> <img src="img_4.jpg" alt="Sea" width="600" height="600"> </a> </div> </div> <div class="clearfix"></div>

Answer 1

如果您想通过单击按钮/链接打开新画廊，您可以编写 JavaScript function 它将在 DOM 中显示您想要的每个元素。

因此，单击从 JS 向 HTML 添加新元素并显示提供的元素。