Wordpress lightbox gallery in product page

@Bartłomiej Malanowski My structure is exactly like from wordpress tutorial. I'm doing that on my friend's website who has MDB Pro.

content-single-product.php

<?php
/**
 * The template for displaying product content in the single-product.php template
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/content-single-product.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce/Templates
 * @version 3.4.0
 */

defined( 'ABSPATH' ) || exit;

/**
 * Hook: woocommerce_before_single_product.
 *
 * @hooked wc_print_notices - 10
 */
do_action( 'woocommerce_before_single_product' );

if ( post_password_required() ) {
  echo get_the_password_form(); // WPCS: XSS ok.
  return;
}
?>
<header>
    <!-- Intro -->
    <div class="card card-intro blue-gradient mb-4">

        <div class="card-body white-text rgba-black-light text-center pt-5 pb-4">

            <!--Grid row-->
            <div class="row d-flex justify-content-center">

                <!--Grid column-->
                <div class="col-md-6">

                  <?php the_title( '<h1 class="product_title entry-title font-weight-bold mb-4">', '</h1>' ); ?>

                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->

        </div>

    </div>
    <!-- Intro -->

</header>

<main>

    <div id="product-<?php the_ID(); ?>" <?php wc_product_class(); ?>>

        <div class="container dark-grey-text">

            <!--Grid row-->
            <div class="row wow fadeIn">

                <!--Grid column-->
                <div class="col-md-6 mb-4">

        <?php
          /**
           * Hook: woocommerce_before_single_product_summary.
           *
           * @hooked woocommerce_show_product_sale_flash - 10
           * @hooked woocommerce_show_product_images - 20
           */
          do_action( 'woocommerce_before_single_product_summary' );
        ?>

                </div>
                <!--Grid column-->

                <!--Grid column-->
                <div class="col-md-6 mb-4">
                     <!--Content-->
                    <div class="p-4">

                    <div class="summary entry-summary">
            <?php
              /**
               * Hook: woocommerce_single_product_summary.
               *
               * @hooked woocommerce_template_single_title - 5
               * @hooked woocommerce_template_single_rating - 10
               * @hooked woocommerce_template_single_price - 10
               * @hooked woocommerce_template_single_excerpt - 20
               * @hooked woocommerce_template_single_add_to_cart - 30
               * @hooked woocommerce_template_single_meta - 40
               * @hooked woocommerce_template_single_sharing - 50
               * @hooked WC_Structured_Data::generate_product_data() - 60
               */
              do_action( 'woocommerce_single_product_summary' );
            ?>
          </div>

                    </div>
                    <!--Content-->

                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->

            <hr>

            <?php if (wc_get_related_products(get_the_ID())) {  ?>

            <!--Grid row-->
            <div class="row d-flex justify-content-center wow fadeIn">

                <!--Grid column-->
                <div class="col-md-6 text-center">
                    <h4 class="my-4 h4">Related products</h4>
                </div>
                <!--Grid column-->

            </div>
            <!--Grid row-->

            <!--Grid row-->
            <div class="row wow fadeIn">

      <?php
        /**
         * Hook: woocommerce_after_single_product_summary.
         *
         * @hooked woocommerce_output_product_data_tabs - 10
         * @hooked woocommerce_upsell_display - 15
         * @hooked woocommerce_output_related_products - 20
         */
        do_action( 'woocommerce_after_single_product_summary' );
      ?>

            </div>
            <!--Grid row-->
            <?php } ?>

    </div>
          <!--Container  -->

  </div>
    <!--Div product -->

<?php do_action( 'woocommerce_after_single_product' ); ?>

</main>

single-product/product-image.php

<?php
/**
 * Single Product Image
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/product-image.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @author  WooThemes
 * @package WooCommerce/Templates
 * @version 3.3.2
 */

defined( 'ABSPATH' ) || exit;

// Note: `wc_get_gallery_image_html` was added in WC 3.3.2 and did not exist prior. This check protects against theme overrides being used on older versions of WC.
if ( ! function_exists( 'wc_get_gallery_image_html' ) ) {
  return;
}

global $product;

$columns           = apply_filters( 'woocommerce_product_thumbnails_columns', 4 );
$post_thumbnail_id = $product->get_image_id();
$wrapper_classes   = apply_filters( 'woocommerce_single_product_image_gallery_classes', array(
  'woocommerce-product-gallery',
  'woocommerce-product-gallery--' . ( has_post_thumbnail() ? 'with-images' : 'without-images' ),
  'woocommerce-product-gallery--columns-' . absint( $columns ),
  'images',
) );
?>
<div class="<?php echo esc_attr( implode( ' ', array_map( 'sanitize_html_class', $wrapper_classes ) ) ); ?>" data-columns="<?php echo esc_attr( $columns ); ?>" style="opacity: 0; transition: opacity .25s ease-in-out;">
  <figure class="woocommerce-product-gallery__wrapper">
    <?php
    if ( has_post_thumbnail() ) {
      $html  = wc_get_gallery_image_html( $post_thumbnail_id, true );
      $html = str_replace( 'class="wp-post-image"', 'class="wp-post-image img-fluid"' , $html );


    } else {
      $html  = '<div class="woocommerce-product-gallery__image--placeholder">';
      $html .= sprintf( '<img src="%s" alt="%s" class="wp-post-image " />', esc_url( wc_placeholder_img_src() ), esc_html__( 'Awaiting product image', 'woocommerce' ) );
      $html .= '</div>';
    }

    echo apply_filters( 'woocommerce_single_product_image_thumbnail_html', $html, $post_thumbnail_id );

    //do_action( 'woocommerce_product_thumbnails' );
    ?>
  </figure>
</div>

So I just copied everything from MDB wordpress ecommerce tutorial and looks fine, but there are some bugs. For example there is also bug in related products - like loop is bugged and it shows 3 related images but more links

I didn't do lightbox but I did carousel of imgs with buttons. If someone know how to do that let me know.

single-product/product-image.php

<?php
if ( !defined( 'ABSPATH' ) ) {
    exit;
}

global $post, $product;
?>
<div class="col-lg-4 mw-100">
    <?php
    // do_action( 'woocommerce_product_thumbnails' );

    global $product;

    $attachment_ids = $product->get_gallery_image_ids();

    $gallery = array();

    $first_image = get_the_post_thumbnail_url( $post->ID, array( 560, 780 ) );

    if ( $first_image != false ) {
        array_push( $gallery, $first_image );
    }



    foreach ( $attachment_ids as $attachment_id ) {
        $image_link = wp_get_attachment_image_src( $attachment_id, array( 560, 780 ) );

        array_push( $gallery, $image_link[ 0 ] );
    }
    ?>

    <?php if ( count( $gallery ) > 1 ) { ?>

        <div id="carousel-thumb" class="carousel slide carousel-fade carousel-thumbnails" data-ride="carousel">

            <!--Slides-->
            <div class="carousel-inner" role="listbox">
                <?php $first = true; ?>
                <?php foreach ( $gallery as $gallery_item ) { ?>

                    <div class="carousel-item<?php
                    if ( $first ) {
                        echo " active";
                        $first = false;
                    }
                    ?>">
                        <a href="<?php echo $gallery_item; ?>"><img src="<?php echo $gallery_item; ?>" class="img-fluid" alt="Slide" width="600" height="600"></a>
                    </div>
                <?php } ?>
            </div>
            <!--/.Slides-->

            <!--Thumbnails-->
            <div class="text-center">
            <a class="left carousel-control btn btn-black btn-sm" href="#carousel-thumb" role="button" data-slide="prev">
                <i class="fa fa-arrow-left mr-1" aria-hidden="true"></i>
                Prev
            </a>
            <a class="right carousel-control btn btn-black btn-sm" href="#carousel-thumb" role="button" data-slide="next">
                Next
                <i class="fa fa-arrow-right ml-1" aria-hidden="true"></i>
            </a>
            </div>
            <!--/.Thumbnails-->

        </div>

    <?php } else { ?>
        <a href="<?php echo $gallery[ 0 ]; ?>"><img src="<?php echo $gallery[ 0 ]; ?>" class="img-fluid" alt="Slide" width="600" height="600"></a>
    <?php } ?>


</div>