将Lightbox添加到PHP JS Slick图片幻灯片

Question

我的整个页面都在PHP Mysql中，但是我想在每个图像上添加一些ligthbox单击作为缩放功能，这些功能已经在JS的每个图像上起作用。这里有详细的代码：图像幻灯片从div class =“ gallery-slider” / php模块开始。希望您能帮助我找到正确的方法。谢谢。

<?php

$servidor = Ruta::ctrRutaServidor();
$url = Ruta::ctrRuta();

?>

<div class="container fontrielsa productFPAdIn" style="padding-top: 150px; font-size: 15px;">
    <nav class="productFTitleIn" aria-label="breadcrumb">
  <ol class="breadcrumb" style="background-color: white; font-weight: 300; margin-bottom: 0px; padding-left: 0px;">
    <li class="breadcrumb-item" id="highlight"><a class="comunLink" href="<?php echo $url; ?>">INICIO</a></li>
    <li class="breadcrumb-item active pagActiva" aria-current="page" style="text-transform: uppercase;"><?php echo $rutas[0] ?></li>
  </ol>
</nav>
</div>

<!--=====================================
INFOPRODUCTOS
======================================-->



<div class="container">
    <div class="row">
        <div class="col-5">


                  <div class="gallery-slider">';
                
    <?php

                $item =  "ruta";
                $valor = $rutas[0];
                $infoproducto = ControladorProductos::ctrMostrarInfoProducto($item, $valor);

                $multimedia = json_decode($infoproducto["multimedia"],true);


                if($multimedia != null){

                    for($i = 0; $i < count($multimedia); $i ++){
                        echo '
                    <div class="item">
                        <img width="445" height="445" src="'.$servidor.$multimedia[$i]["foto"].'" data-zoom-image="'.$servidor.$multimedia[$i]["foto"].'">
                    </div>';
                    
                    }
                }
    ?>
                    </div>
        </div>

        <div class="col">
            ggg
        </div>
    </div>

    <div class="row">
        <div class="col-5">

                      <div class="thumbs-slider">
    <?php
            



                $item =  "ruta";
                $valor = $rutas[0];
                $infoproducto = ControladorProductos::ctrMostrarInfoProducto($item, $valor);

                $multimedia = json_decode($infoproducto["multimedia"],true);


                if($multimedia != null){

                    for($i = 0; $i < count($multimedia); $i ++){
                        echo '
                    <div class="item">
                        <img width="100" height="100" src="'.$servidor.$multimedia[$i]["foto"].'">
                    </div>';
              
                    }
                }

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






<style>

@import url("//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css");
@import url("//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css");
    
</style>

$('.gallery-slider').slick({
            slidesToShow: 1, 
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: '.thumbs-slider',
            dots: true, 
            centerMode: false,

        });
                
        $('.thumbs-slider').slick({
            infinite: true,
            vertical: false,
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: '.gallery-slider',
            dots: false,
            centerMode: true,
            focusOnSelect: true
        });

//product zoom
        $(".gallery-slider .slick-active img").elevateZoom({
              zoomType: 'inner',
                cursor: 'crosshair'
        });
        $(".gallery-slider .big_img img").bind("click", function(e) {
            var ez = $('.gallery-slider .big_img img').data('elevateZoom');
            $.fancybox(ez.getGalleryList());
            return false;
        });
        // On before slide change
        $('.gallery-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){
            $('.zoomContainer').remove();
        });
        $('.gallery-slider').on('afterChange', function(event, slick, currentSlide, nextSlide){
            
            var ez = $('.gallery-slider .slick-active img');
            ez.elevateZoom({
                  zoomType: 'inner',
                cursor: 'crosshair'
            });
            $('.gallery-slider .slick-active img').bind("click", function(e) {
                var ez = $('.gallery-slider .slick-active img').data('elevateZoom');
                $.fancybox(ez.getGalleryList());
                return false;
            });

        });
//product zoom