Summary Block Lightbox

Description

• Summary Block, pull posts from Blog Page
• Click each summary item >> Open blog post in a Lightbox

#1. First, edit Summary Block > Enable Excerpt

#2. Next, find Summary Item URL.
In my example, we will have

• /blog-2-1/the-mountai-bike
• /blog-2-1/blog-post-title-two-km9nm
• /blog-2-1/blog-post-title-four-r46pw

#3. Edit Post Excerpt > Add text/url

Make sure “Open in New Tab”

• Quick View – #wm-popup=/blog-2-1/the-mountai-bike
• Quick View – #wm-popup=/blog-2-1/blog-post-title-two-km9nm
• Quick View – #wm-popup=/blog-2-1/blog-post-title-four-r46pw

#4. Install this Lightbox Plugin
Plugin will give you some code to add to Code Injection Header/Footer, like this.

#5. Result
When users click Quick View, it will open item in Lightbox.
Here I use text Quick View, but you can change it to Lightbox, Read more or any text what you want.

#6. If you want whole item clickable to lightbox, use this code to Custom CSS box.

div.summary-excerpt a[href*="#wm-popup"] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent !important;
}

Result