如何使elevateZoom与2 div一起使用

Question

对不起，我的英语。我对javascript很陌生...

我的小画廊代码使用ekko-lightbox构建，缩放使用elevatezoom。

这里可以显示我的所有代码。

Javascript

   <!--- open window small image gallery --->

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

    <!--- hover small image gallery and display on big window --->

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 window --->
  
$('#zoom_05').elevateZoom({
   zoomType: 'inner',
   cursor: 'crosshair',

});

.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; 
}

 <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>

我的问题，该缩放如何显示在grosse-bild Div上，因为现在它仅显示在kleine-fenster Div。]上>

请问有人可以简单地说一下如何解决这个问题吗？

对不起，我的英语。.我对javascript很陌生...我的小画廊代码使用ekko-lightbox构建，而zoom用elevatezoom构建。这里可以显示我的所有代码。 Javascript

Answer 1

此解决方案与您想要的类似：