Display dynamic content in overlay panels?

Hi Stefanie,

Why not? You can add the query block into the overlay panel and set an offset parameter for the query block to offset the posts that are already displayed in the regular content area.

Will that work in your case?

Thanks for the site link, now I get what you are trying to achieve.

Unfortunately, I don’t think it’s possible to make the settings dynamic.

I get the idea, it’s pretty cool!

But it will require some custom JS and PHP, try chatGPT or Grok, they might be able to create a solution 🙂

Haha, sorry to hear that… But yes, your idea is very interesting.

I hope you can make it work 🙂

The idea is too interesting to not go for it, so I did…lol
Try this:

1. add CSS class custom-looper to the looper block on the page.
2. add CSS class custom-loop-item to the loop item block on the page.
3. add CSS class overlay-custom-looper to the looper block in the overlay panel.
4. add CSS class overlay-custom-loop-item to the loop item block in the overlay panel.
5. add this JavaScript to a custom HTML block on the page.

<script>
document.addEventListener('DOMContentLoaded', function() {
    const items = document.querySelectorAll('.custom-looper .custom-loop-item');
    const overlays = document.querySelectorAll('.overlay-custom-looper .overlay-custom-loop-item');

    if (!items.length || !overlays.length) {
        console.warn('No .custom-loop-item or .overlay-custom-loop-item found.');
        return;
    }

    items.forEach((item, index) => {
        item.addEventListener('click', () => {
            // Remove active from all overlays
            overlays.forEach(o => o.classList.remove('active'));

            // Find overlay with matching index
            const target = overlays[index];
            if (target) {
                target.classList.add('active');
                console.log(<code>Activated overlay index: ${index + 1}</code>);
            } else {
                console.warn(<code>No overlay found for index ${index}</code>);
            }
        });
    });
});
</script>

6. add this CSS:

.overlay-custom-looper .overlay-custom-loop-item {
    display: none;
}

.overlay-custom-looper .overlay-custom-loop-item.active {
    display: block;
}

Note:
1. do not add any links to the loop item on the page, just use # as the link.

2. the 2 query blocks (in the page and overlay) should display the same posts in the same order.

3. the simple solution only works for one page layout.

Can you provide an admin login so I can see the setup?

There was a syntax error in the JS, I’ve corrected it.

It’s working now, please check.

Do you mean that it can only be used once per site?

No, you can use it on as many pages as you want 🙂

I meant the query loop cannot have pagination, because the solution grabs the index of the post, it gets confused when pagination is involved.

Because otherwise, the old overlay is called up when I click on a card in the new page.

This is a weird one, I feel like it’s an overlay issue. But I can not replicate it on my install.

Do you have server-level cache on? It might be related to cache.