Use Lightbox in Custom Code

Hey there,

I’m currently working on a Plugin for my page. I’ using custom post types to display a photography portfolio. I want these images to be opened in a Lightbox onclick. I copied the source code from my page where I’m using the Lightbox in King Composer and made my adjustments, but I can’t get the Lightbox to work.

function displayPortfolio() {
        
        $args = array( 'post_type' => 'vmf_portfolio', 'posts_per_page' => 10 );
        $loop = new WP_Query( $args );
        
        echo "<div class='portfolio-container'>";
        
        while ( $loop->have_posts() ) : $loop->the_post();

        echo "<div class='kc_single_image'>";
        echo "<a rel='prettyPhoto[portfolio]' class='kc-image-link kc-pretty-photo kc-pt-loaded' data-lightbox='kc-lightbox' href='". get_the_post_thumbnail_url() . "' title='' target=''>";
        echo "<img src='" . get_the_post_thumbnail_url() ."' class='special-img' alt=''>";
        echo "<div class='kc-image-overlay'><i class='fa-search-plus'></i></div>";
        echo "</a></div>";
        
        echo "</div>";
        
        endwhile;
        }

Everything’s working fine, the picture shows up, the hover overlay is working, but when I click the image, a new tab opens and not the lightbox.

Thanks in advance.
Viktoria