(Squarespace) How to create a Blog Page Lightbox

[tuanphan]

Description: Users click on item on Blog Overview Page

>> Open Blog post detail in a lightbox popup

#1. First, install Popup Plugin

#2. Use this code under Popup code in Code Injection > Footer

<!-- @tuanphan - 060725 - Blog Page Lightbox -->
<script>
function initBlogPopup() {
  console.log('Initializing blog popup...');
  if (typeof wmPopup === 'undefined') {
    console.log('wmPopup not found, waiting...');
    setTimeout(initBlogPopup, 500);
    return;
  }
  
  console.log('wmPopup found!');
  const blogItems = document.querySelectorAll('.blog-basic-grid--container');
  console.log('Found blog items:', blogItems.length);
  
  blogItems.forEach((item, index) => {
    const titleLink = item.querySelector('.blog-title a');
    const imageLink = item.querySelector('.image-wrapper');
    const readMoreLink = item.querySelector('.blog-more-link');
    
    const link = titleLink || imageLink || readMoreLink;
    
    if (link) {
      const blogUrl = link.getAttribute('href');
      console.log(`Blog ${index} URL:`, blogUrl);
     
      item.style.cursor = 'pointer';
      item.addEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        
        console.log('Blog item clicked:', blogUrl);
        wmPopup.openPopup(blogUrl);
      });
      const allLinks = item.querySelectorAll('a');
      allLinks.forEach(a => {
        a.addEventListener('click', function(e) {
          e.preventDefault();
          e.stopPropagation();
        });
      });
    }
  });
}
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', initBlogPopup);
} else {
  initBlogPopup();
}
setTimeout(initBlogPopup, 1000);
</script>

#3. Use this code to Custom CSS

/* Custom Blog Popup style */
.wm-popup-content .blog-item-wrapper {
  padding: 40px;
  max-width: 900px;
  margin: 0 auto;
}
.wm-popup-content .blog-item-wrapper img {
  width: 100%;
  height: auto;
  margin-bottom: 30px;
}
.wm-popup-content .blog-meta {
  margin-bottom: 20px;
  color: #666;
  font-size: 14px;
}
.wm-popup-content .blog-content {
  line-height: 1.8;
  font-size: 16px;
}
.blog-basic-grid--container {
  cursor: pointer;
}
.blog-basic-grid--container * {
  pointer-events: none;
}
.blog-basic-grid--container a {
  cursor: pointer;
}
.wm-popup-loading {
  background: rgba(255, 255, 255, 0.95);
}
.wm-popup-loading .loading {
  border-color: #333 transparent transparent transparent;
}
.blog-basic-grid--container {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.blog-basic-grid--container:hover {
  transform: translateY(-5px);
}