Buy me a coffee

Squarespace: Portfolio Page Lightbox

#1. First, you need to find the Portfolio item URL.

In my example, we will have:

  • /portfolio01/project-one-ephnc-ra6kt
  • /portfolio01/project-two-llrgk-y6r72
  • /portfolio01/project-three-8zgh7-cw24f
  • /portfolio01/project-four-yjynj-3ft5b
  • /portfolio01/project-five-jkmzy-8756a

squarespace-portfolio-page-lightbox-01-min

squarespace-portfolio-page-lightbox-02-min

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

squarespace-portfolio-page-lightbox-03-min

squarespace-portfolio-page-lightbox-04-min

#3. Use this code to Code Injection > Footer (above plugin code)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $('.grid-item[href="/portfolio01/project-one-ephnc-ra6kt"]').attr('href','#wm-popup=/portfolio01/project-one-ephnc-ra6kt');
  	$('.grid-item[href="/portfolio01/project-two-llrgk-y6r72"]').attr('href','#wm-popup=/portfolio01/project-two-llrgk-y6r72');
 	 $('.grid-item[href="/portfolio01/project-three-8zgh7-cw24f"]').attr('href','#wm-popup=/portfolio01/project-three-8zgh7-cw24f');
 	 $('.grid-item[href="/portfolio01/project-four-yjynj-3ft5b').attr('href','#wm-popup=/portfolio01/project-four-yjynj-3ft5b');
  	$('.grid-item[href="/portfolio01/project-five-jkmzy-8756a').attr('href','#wm-popup=/portfolio01/project-five-jkmzy-8756a');
</script>

squarespace-portfolio-page-lightbox-05-min

#4. Note

squarespace-portfolio-page-lightbox-06-min

#5. If you see Lightbox Background is transparent, you can use this code to Code Injection – Footer to fix it.

<style>
.wm-popup-wrapper {
    background-color: #fff;
}
</style>

squarespace-portfolio-page-lightbox-07-min

#6. Result.

When clicking the item on the Portfolio Page, it will open a lightbox with detailed content.

squarespace-portfolio-page-lightbox-08-min

 

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?

    Reply

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: https://beaverhero.com/squarespace-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