Buy me a coffee

Squarespace: Portfolio Page Lightbox

Portfolio does not have the Lightbox Feature by default, but we can do this with some custom code.

Portfolio page lightbox means that when you click on a project in the portfolio page, it shows the lightbox, without having to go to the detailed portfolio page.

1. Create Portfolio Page

First, create your portfolio page and sub-pages. Here I take the example of Work Page, with Page URL /work

2. Install Lightbox Code

Next you need to download this lightbox code and install it.

(Download > Extract > Open instructions.html > Do step 1 & step 2)

3. Create “Portfolio Lightbox Page”

Note that the above code will not convert the Portfolio Page project directly into Lightbox, but we need to create another page > Insert Image Blocks or Gallery Section to recreate the Portfolio Page created in step 1 > And we can convert these blocks into Lightbox.

Add Page > Select “Blank Page” and name “Portfolio”

Edit “Portfolio” page > Add Gallery Section (or Image Blocks), here I use Gallery Section

and insert sub-page in Portfolio Page (created in Step 1)

How to fill in the link? Read Step 4

4. Insert Links

First you need to check the sub-page url in the Portfolio Page created in step 1.

Assuming the url here is /work/web-design/project-one

Go back to step 3, click on the image on the left (you can change the image so it same as the sub-page in Portfolio), then enter the link on the right according to the structure.


Like this

Repeat for other Projects.

If you use Image Blocks, do similar!


5. Result

Access Portfolio Lightbox Page (you created in Step 3), and click on a project. You will see a Lightbox!

1 thought on “Squarespace: Portfolio Page Lightbox”

  1. hi I followed the steps outlined but it only opens one Lightbox. then when I click on another project it doesn’t load. It only works once. The only thing that helps is if I reload the entire page then I can open 1 Lightbox before it stops working again. do you know why it does this? maybe something in the Lightbox css code that blocks it from loading more then once?


Leave a Comment

Ask me a question, free

If your site is private or in trial, just setup password and share url. See how to:
Please check your email carefully. Recently I got a lot of questions with wrong emails.

If you haven't heard from me within 24 hours please check your junk/spam folder