How to add portfolio-overlay / lightbox gallery

Perch: 3.0.8, PHP: 7.0.19, MySQL: mysqlnd 5.0.12-dev - 20150407 - $Id: b5c5906d452ec590732a93b051f3827e02749b83 $, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (3.0.8), assets (3.0.8), categories (3.0.8), perch_backup (1.2)
App runtimes: <?php $apps_list = [ ];
PERCH_LOGINPATH: /perch
PERCH_PATH: /home/christies/domains/christiesinterieur.be/public_html/perch
PERCH_CORE: /home/christies/domains/christiesinterieur.be/public_html/perch/core
PERCH_RESFILEPATH: /home/christies/domains/christiesinterieur.be/public_html/perch/resources
Image manipulation: GD
PHP limits: Max upload 64M, Max POST 64M, Memory: 128M, Total max file upload: 64M
F1: 0c66c2e1f82f9e0b7617b2cb8270f2c7
Resource folder writeable: Yes
SCRIPT_NAME: /perch/core/settings/diagnostics/index.php
REQUEST_URI: /perch/core/settings/diagnostics/
DOCUMENT_ROOT: /home/christies/domains/christiesinterieur.be/public_html
HTTP_HOST: www.christiesinterieur.be

Hello, I want to add a lightbox gallery to my portfolio slider. There is an overlay with a clickable icon when hovering --> then it opens a lightbox with the same images, but uncropped. This is the current working code without lightbox gallery.

<div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-speed="400" data-pause="4000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <perch:repeater id="images" label="Images"><div class="slide"><img src="<perch:content id="images" type="image" label="Afbeelding product" width="400px" height="300px" crop="true" />"></div>
                                        </perch:repeater>

                                    </div>
                                </div>
                            </div>
                        </div>

I want to add an overlay with a clickable icon (class: left-icon) when hover --> then it opens a lightbox with the same images, but uncropped. The class: left-icon has to be linked with the first image. The other images in the slider, should have class: hidden. Something like this, but it doesn't work.

<div class="portfolio-image">
                            <div class="fslider" data-arrows="false" data-speed="400" data-pause="4000">
                                <div class="flexslider">
                                    <div class="slider-wrap">
                                        <perch:repeater id="images" label="Images"><div class="slide"><img src="<perch:content id="images" type="image" label="Afbeelding product" width="400px" height="300px" crop="true" />"></div>
                                        </perch:repeater>

                                    </div>
                                </div>
                            </div>
                            <div class="portfolio-overlay" data-lightbox="gallery">
                                <perch:repeater id="images" label="Images">
                                <a href="<perch:content id="images" type="image" label="Afbeelding product" />" class="left-icon" data-lightbox="gallery-item"><i class="icon-line-stack-2"></i></a>
                                </perch:repeater>
                            </div>
                        </div>