Description: a Portfolio Page with sub pages, when clicking on each subpage >> Open a Lightbox with Subpage content.
How to
#1. First, create a Plus Icon > Choose Portfolio
#2. Choose a layout (you can change this later, anytime you want)
Squarespace will create some sample items, you can edit them, or remove them and create new one.
#3. Next, to add lightbox features, you need to find sub page 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
#4. Install Lightbox Plugin, plugin will give you some code to add to Code Injection Header/Footer, like this.
#5. Use this code to Website Tools > 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>
#6. Note
#7. Result
When clicking the item on the Portfolio Page, it will open a lightbox with detailed content.
