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