How to separate gallery view from one to another using ImageLightbox.js?

Question

Lightbox

To display photos, I use the ImageLightbox.js script .
Here are two galleries that I would like to separate viewing. At the moment, when you open, for example, the first photo and start scrolling, instead of two photos you see photos from the neighboring gallery.

<div class="gallery slider grab" data-autoplay="false" data-autoheight="true">
    <figure>
       <a data-imagelightbox="f" href="img/optimized/image1.png"><img data-src="img/optimized/image1.png" alt="Text"></a>
       <a data-imagelightbox="f" href="img/optimized/image2.png"><img data-src="img/optimized/image2.png" alt="Text"></a>
    </figure>
</div>
<div class="gallery slider grab" data-autoplay="false" data-autoheight="true">
    <figure>
       <a data-imagelightbox="f" href="img/optimized/image3.png"><img data-src="img/optimized/image3.png" alt="Text"></a>
       <a data-imagelightbox="f" href="img/optimized/image4.png"><img data-src="img/optimized/image4.png" alt="Text"></a>
    </figure>
</div>

How to separate gallery view from one to another? That is, so that in the lightbox, after viewing the last photo of the first gallery, there is no transition to the first photo of the next gallery.

Answer 1

Thank you, the Toaster community, for responding very quickly to questions that have arisen. I will recommend this wonderful site to all my friends and family. Newbies are answered so quickly here that I don’t even have time to write a question before the answer comes from the community.
Damn, at least you wrote something.