Buy me a coffee

Portfolio to Video 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-04-min

squarespace-portfolio-page-lightbox-03-min

#3. Create a Page in Not Linked with Name/URL:

  • Lightbox Video – /lightbox-video

portfolio-to-video-lightbox-03-min

#4. Add some Video Blocks to this Lightbox Video Page

portfolio-to-video-lightbox-04-min

#5. Install Squarespace ID Finder and find the ID of these Video Blocks. In my example, we will have:

  • Video 01: #block-yui_3_17_2_1_1717469864332_4134
  • Video 02: #block-yui_3_17_2_1_1717469864332_3425
  • Video 03: #block-yui_3_17_2_1_1717469864332_2864

portfolio-to-video-lightbox-05-min

#6. 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=/lightbox-video#block-yui_3_17_2_1_1717469864332_4134');
  	$('.grid-item[href="/portfolio01/project-two-llrgk-y6r72"]').attr('href','#wm-popup=/lightbox-video#block-yui_3_17_2_1_1717469864332_3425');
 	 $('.grid-item[href="/portfolio01/project-three-8zgh7-cw24f"]').attr('href','#wm-popup=/lightbox-video#block-yui_3_17_2_1_1717469864332_2864');
</script>

portfolio-to-video-lightbox-06-min

#7. Result.

When clicking an item on the Portfolio Page, a Video Lightbox will appear.

portfolio-to-video-lightbox-07-min

portfolio-to-video-lightbox-08-min

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