Wie kann bekomme der Zoom mit Zwei Div

[liebewinter]

Der code von dem kleine Bilder Gallery have mit ekko-lightbox gebaut und der Code für das zoom mit elevatezoom .

Hier das ganze Code,

Javascript

   <!--- offnet die kleine bilder galerie --->

   
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
   
    event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});

    <!--- hover kleine bilder gallery und zeigt auf dem grosse fenster --->

var thumbSelect = document.querySelectorAll('.thumb'),
windowSelect = document.querySelector('.window'), thumbCount;

for (thumbCount = 0; thumbCount < thumbSelect.length; thumbCount++) {
        thumbSelect[thumbCount].onmouseover = function() {
           windowSelect.src = this.src;
         };
};

     <!--- zoom Fenster --->
  
$('#zoom_05').elevateZoom({
   zoomType: 'inner',
   cursor: 'crosshair',

});

Css

.grosse-bild {  padding: 40px;  background-color: #dedee0;  width: 53.7%;    }



#lalo {width: 5%; margin-right: 10px; margin-right: 7px;}
.kleine-fenster{
   width: 50%;
   border: none;
   padding-top: 5px;
   display: block;
   margin-left: auto;
   margin-right: auto;
}
.row {
 margin: 10px; 
}

Html

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
 <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js">   </script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<script src="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/ekko-lightbox/5.2.0/ekko-lightbox.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/elevatezoom/3.0.8/jquery.elevatezoom.min.js"></script>

<div class="container">

  <div class="grosse-bild">
    <div class="kleine-fenster" > 

      <img id="zoom_05" src="https://i.imgur.com/51pNImi.png" width="200" height="200" class="window" data-zoom-image="https://i.imgur.com/rt5G4Ol.jpg" >


   </div> 
 </div>
<div class="row">
  <a href="https://i.imgur.com/51pNImi.png"  data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" id="lalo" style="border-style: solid; border: 1px solid #b3b3b3; width: 5.2%;" >
    <img src="https://i.imgur.com/rt5G4Ol.jpg" class="img-fluid thumb" >
  </a>
  <a href="https://i.imgur.com/S94Kz2A.png"  data-toggle="lightbox" data-gallery="gallery" class="kleine-bild" style="border-style: solid; border: 1px solid #b3b3b3; width: 10%;">
    <img src="https://i.imgur.com/cneOtx6.jpg" class="img-fluid thumb" >
  </a>
 </div>
</div>

Hier kannst sehen wie der code funzioniert...

Meine probleme, wenn der Zoom wird gezeigt , er zeigt nur auf dem kleine-fenster Div, wenn ich möchte die wird gezeigt auf ganze Fenter, das ist, auch auf dem grosse-bild Div...

Kann Bitte jemand hilfe mit dieser Probleme?