implemented a gallery with thumbnails with the help of lightGallery, the location is as in the picture, by clicking on the thumbnail the images are enlarged and everything works, and how to do the same for a large image, I'm still at a dead end. Maybe I’m not doing this at all

<div class="container-gallery" > <div class="static-img"> <img src="http:....> </div> <div class="dynamic-img" style="margin-top:0%"> <ul id="lightgalery" class="gallery"> <li data-src="https:...> <a href="#"> <img src="https:...."> </a> </li> <li data-src="https:...."> <a href="#"> <img src="https:..."> </a> </li>

styles:

  .container-gallery{ display: flex; flex-direction: column; border: 2px solid red; } .gallery{ display: flex; } .gallery ul { list-style: none outside none; padding-left: 0; } .gallery li { height: 100px; margin-bottom: 6px; margin-right: 6px; width: 100px; } .gallery li a { height: 100px; width: 100px; } .gallery li a img { max-width: 100px; }

enter image description here

  • Yes, the markup is different, since I didn’t know how to make a list on two lines, so that the first one had one picture, and the second 3 - Elena

1 answer 1

In the morning with new thoughts, figured out! :) I made all the pictures in the list, added the first-image class to the top of the picture and set the styles:

 .gallery li:nth-child(1) { float: none; height: auto; width: 100%; } .gallery .first-image { max-width: 250px; margin-left:30px; margin-top: -30px; }