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

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

#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>

#4. Note

#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>

#6. Result.

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