(Squarespace) Click Image in Gallery Full Slideshow - Open a Popup

Description: Click Image in Gallery Slideshow Full > Open a Bigger Image in Popup

#1. First, create a Page in Not Linked.

With Name/URL: Content Lightbox – /content-lightbox

#2. Next, add 6 Image Blocks > Find ID of 6 Images

In my example, it is:

  • Image 01: #block-yui_3_17_2_1_1740445560003_7031
  • Image 02: #block-560f048b6e18610f9311
  • Image 03: #block-b758652ba9c261d54274
  • Image 04: #block-bf8bd441ea7f7cd7ae38
  • Image 05: #block-dc7fe4c9629c3ea4a184
  • Image 06: #block-393e6662c79d41e7ced2

#3. Edit Slideshow Image

Edit each image > Enter this URL into URL field

With Slideshow Image 1 – URL: #wm-popup=/content-lightbox#block-yui_3_17_2_1_1740445560003_7031

With Slideshow Image2 – URL: #wm-popup=/content-lightbox#block-560f048b6e18610f9311

With Slideshow Image3 – URL: #wm-popup=/content-lightbox#block-b758652ba9c261d54274

With Slideshow Image4 – URL: #wm-popup=/content-lightbox#block-bf8bd441ea7f7cd7ae38

With Slideshow Image5 – URL: #wm-popup=/content-lightbox#block-dc7fe4c9629c3ea4a184

With Slideshow Image6 – URL: #wm-popup=/content-lightbox#block-393e6662c79d41e7ced2

#4. Install Popup Plugin

Plugin will give you some code to Code Injection > Header

and Footer

#5. Result

When users click on Slideshow Image 1

When users click on Slideshow Image 2

When users click on Slideshow Image 3

When users click on Slideshow Image 4

When users click on Slideshow Image 5

When users click on Slideshow Image 6

1 Like

@tuanphan,

:heart: :heart: :heart: