Jump to anchor in fullscreen overlay

The CMS Questions
1

Hi all,

i have some images which are displayed like this:

        <?php if ($page->imagesGallery()->isNotEmpty()): ?>
        <div class="images">
            <?php foreach ($page->imagesGallery()->toFiles() as $image): ?>
            <figure class="<?= $image->orientation() ?>">
                <img src="<?= $image->url() ?>" srcset="<?= $image->srcset() ?>" loading="lazy" alt="<?= $image->alt() ?>" />
                <figcaption>
                    <?= $gallery->indexOf($image) + 1 ?>
                </figcaption>
            </figure>
            <?php endforeach ?>
        </div>
        <?php endif ?>

The same images should be displayed bigger in a fullscreen overlay. The overlay is hidden by css and gets visible by clicking on one of the images.
How can I link to a specific image/anchor in the overlay? So when clicking image number 23, the fullscreen overlay should open at image 23 with image 1-22 before and 24-X after it.

Thanks so much!

All best
L

2

Wrap the images in a a tag with a href attribute that points to the bigger images.

You can find an example in the Starterkit album template.