How to open Portfolio image in a Lightbox using Featherlight in Genesis

In my Facebook group, a user asked:

I'm having fun rebuilding my portfolio using some of your tutorials. (filterable taxonomies) and starting with your single-portfolio.php here: https://sridharkatakam.com/portfolio-post-type-genesis/ -- One thing I can't figure out is how to make the image on the SINGLE clickable to view in a fancybox. I have lots of different sizes in my portfolio, so I've chosen to display an uncropped, but smaller image on the single page along with the description (links, client testimonials, etc.), and would like the full image to pop up in a fancybox should anyone want to look at it.

We can hook a function to genesis_entry_content having the code to display medium sized featured image linking to its full image and load Featherlight jQuery script on portfolio CPT single pages when the entry has a featured image. This tutorial assumes that you already have a Custom Post Typed named portfolio.

Note: For steps on displaying content in lightbox upon clicking featured images in portfolio CPT archive follow this tutorial.

Back on the topic,

Step 1

Create a directory named css inside child theme directory and upload featherlight.min.css.

Step 2

Create a directory named js (if not existing already) inside child theme directory and upload featherlight.min.js.

Step 3

Upload this image to child theme's images directory.

Step 4

Create a file named single-portfolio.php in the child theme having the following: