Click Summary Block Item – Show Lightbox

Suppose you have a Summary Block with 3 items: Blog Post Title 01, Blog Post Title 02, Blog Post Title 03.

You want: when users click on each item will open a Lightbox.

#1. First, you need to get the URL of these blog post items
Here you will have 3 URLS:

/blog-sidebyside/blog-post-title-01
/blog-sidebyside/blog-post-title-02
/blog-sidebyside/blog-post-title-03

#2. Edit 3 items > Edit Excerpt > Add a text: View more.

Next, edit View more text > Enter these URL

#lightbox_blog-sidebyside/blog-post-title-01
#lightbox_blog-sidebyside/blog-post-title-02
#lightbox_blog-sidebyside/blog-post-title-03

#3. Install Lightbox Plugin
The plugin will ask you to add some code to Code Injection – Footer, something like this.

#4. Done. Now when you click the text “View more” It will open a lightbox like this.

#5. However, when you click Title, Image…it still redirects to the blog post page.
If you want it to open a lightbox, use this code to Page Header Code Injection (the page where you added the Summary Block)

However, this code will force the Date, Author, Category, Title, and Thumbnail link in Lightbox.

<style>
.summary-excerpt.summary-excerpt-only a[href*="#l"] {
    position: absolute;
    color: transparent;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}
</style>