Display Blog Posts in Lightbox from Summary Block

Has anyone ever tried to display blog posts in a lightbox when clicked on from a summary block?

My client wants a timeline with clickable pop-ups that share the backstory of each moment. I was hoping to use the blog feature to categorize and organize the posts. I've considered using the Lightbox Anything plugin from SQSP Themes, but wanted to check the forum before I go that route. I'd rather not create individual pages with individual links for each moment.

Any ideas?

This is possible

I did a quick example here. You can check

https://tuanphan.squarespace.com/summary-lightbox?noredirect

pass: abc

On 6/9/2023 at 12:51 AM, tuanphan said:

This is possible

I did a quick example here. You can check

https://tuanphan.squarespace.com/summary-lightbox?noredirect

pass: abc

We would like to do this on a site we're building now. @tuanphan Can you share with us how you made it happen?

Any update on how to do this?

On 9/5/2023 at 2:11 AM, Deezusssss said:

Any update on how to do this?

Sorry, above member messaged me so I didn't reply here.

Here I used Lightbox Plugin (referral link) to achieve it.

This is exactly the solution I was hoping to find, @tuanphan! Sorry to be a pain, but can you elaborate on how you made this happen? I'm familiar with the LightBox Plug-In, but where were you adding the lightbox link to?

On 5/2/2024 at 2:57 AM, caitede said:

This is exactly the solution I was hoping to find, @tuanphan! Sorry to be a pain, but can you elaborate on how you made this happen? I'm familiar with the LightBox Plug-In, but where were you adding the lightbox link to?

I added link to Excerpt, then use code to make Excerpt cover whole item, so when you click item, it will open lightbox.

This is code, you can add it to Page Header Code Injection (page where you use Summary)

<style>
.summary-item {
    position: relative;
}
.summary-item p a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    color: transparent !important;
}
</style>