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

Question

I have a grid image gallery for a collection of projects. By clicking each image, I want it to have a pop-up image slideshow that shows more images that are not in the gallery. So people can see more details about a particular project.

Is it possible to do that with hrml/css/javascript? I'm building it on Tumblr so functions are limited. Below is the very basic html/css of the grid image gallery. How should I continue from that on?

 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

if you want to open new gallery by clicking on a button/link you can write a JavaScript function which will display every element you want in the DOM.

So, on click add new element to HTML from JS and display provided elements.