(Squarespace) How to open Summary Block Event items in Lightbox

To make Event Lightbox appears on click Summary Block Event item, like this.

#1. First, use this code to Custom CSS

div.eventitem-sourceurl {
    display: none;
}

#2. Edit Event item > Settings

Enter this url format to Source URL: #wm-popup=event-item-url-slug

Like this #wm-popup=/events-new/event-four-zkhnc

#wm-popup=/events-new/event-five-w5e93

#3. Install WM Popup Plugin

#4. Add this extra code above Plugin code in Code Injection > Footer

<!-- Event Summary Lightbox - 28-07-2025 - V2-356-126 -->
<script>const EVENT_SELECTOR='.summary-item-record-type-event';function initEventPopup(){const eventItems=document.querySelectorAll(EVENT_SELECTOR);eventItems.forEach(async(item)=>{const titleLink=item.querySelector('.summary-title-link');const thumbnailLink=item.querySelector('.summary-thumbnail-container');if(!titleLink)return;const originalHref=titleLink.getAttribute('href');try{const response=await fetch(originalHref+'?format=json-pretty');const data=await response.json();const sourceUrl=data.item?.sourceUrl;if(sourceUrl&&sourceUrl.startsWith('#wm-popup=')){titleLink.setAttribute('href',sourceUrl);titleLink.addEventListener('click',function(e){e.preventDefault()});if(thumbnailLink){thumbnailLink.setAttribute('href',sourceUrl);thumbnailLink.addEventListener('click',function(e){e.preventDefault()})}
console.log(`Updated Event: ${originalHref} -> ${sourceUrl}`)}}catch(error){console.error(`Error fetching data for ${originalHref}:`,error)}})}
function waitForEventElements(){if(document.querySelectorAll(EVENT_SELECTOR).length>0){initEventPopup()}else{setTimeout(waitForEventElements,100)}}
if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',waitForEventElements)}else{waitForEventElements()}</script>

1 Like