Lightbox-Integration - Where is my mistake?

I’ve been looking for a pure-CSS-lightbox for a while. And I’ve found this one, which is loading the big images only once you click the thumb.

First I’ve set up a basic-HTML-file to understand what’s happening. I’m a newbie, as you might know. Looks like this and it is working as expected:

<!-- thumbnail image wrapped in a link -->
<a href="#img1">
	<img src="Bild_01_thumb.jpg">
</a>

<!-- lightbox container hidden with CSS -->
<a href="#" class="lightbox" id="img1">
	<span style="background-image: url('Bild_01.jpg')"></span>
</a>

That’s what I’m trying to adopt in Kirby. My best try - but it is not working (nothing happens when I click an image in Firefox, Edge and Chrome):

<?php foreach($images as $image): ?>
			
	<a href="#img<?= $image->indexOf($images) ?>"> 
       <img src="<?= $image->resize(1000,1000,75)->url() ?>" />
	</a>

	<a href="#" class="lightbox" id="#img<?= $image->indexOf($images) ?>">
	   <span style="background-image: url('<?= $image->url() ?>')"></span>
	</a>

<?php endforeach ?>

Firefox Dev-Tools misplaces the href, the other browsers are showing the right lineup:

What’s wrong with my code? I’m confused… :confused:

Ups - found my mistake. I had to delete the # in the ID…

Delete this thread, if you want too…