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…