My website has a lot of images, so in order to compress bandwidth usage, I want to implement (or a form of) Lazy image loading in combination with Lightbox. Concerning Lightbox, I use the default plugin lightbox-plus-jquery.min.js and lightbox.min.css.

Now, I want to implement Lazy images (lazysizes.min.js plugin) into Lightbox. However, examples and explanations that I found here, are not working because of the way I use Lightbox.

To explain summarized, my code first loads a small image_A. When clicked on it, it opens Lightbox with a large image_AA. Within this Lightbox pop-up, one can navigate to image_B, image_C, etc. which are hidden on the initial page. However, I load these images through an HTML link, to use the 'rel' attribute to link them to a specific Lightbox sequence.

How can I implement Lazy loader (or another plugin) in this way of coding, so that image_AA, image_B, image_C only load when visible?

My code:

<a href="../img/folder-A/image_AA.jpg" rel="lightbox[lb_A]" data-title="© Test 2021">
<img src="../img/folder-A/image_A.jpg">
<h2>Title</h2>
</a>
<a  class="image_hidden" href="../img/folder-A/image_B.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_C.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_D.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-A/image_E.jpg" rel="lightbox[lb_A]" data-title="© Test 2021"></a>

<a href="../img/folder-B/image_XX.jpg" rel="lightbox[lb_B]" data-title="© Test 2021">
<img src="../img/folder-B/image_X.jpg">
<h2>Title_X</h2>
</a>
<a  class="image_hidden" href="../img/folder-B/image_Y.jpg" rel="lightbox[lb_B]" data-title="© Test 2021"></a>
<a  class="image_hidden" href="../img/folder-B/image_Z.jpg" rel="lightbox[lb_B]" data-title="© Test 2021"></a>