javascript - 如何让 elevateZoom 与两个 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 上显示。

请有人用简单的话解释一下如何解决这个问题？

Answer 1

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

var zoomConfig = {cursor: 'crosshair', zoomType: "inner" }; 
var image = $('#gallery_01 a');
var zoomImage = $('img#zoom_03');

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.hover(function(){
   // Remove old instance od EZ
   $('.zoomContainer').remove();
  zoomImage.removeData('elevateZoom');
  // Update source for images
  zoomImage.attr('src', $(this).data('image'));
  zoomImage.data('zoom-image', $(this).data('zoom-image'));
  // Reinitialize EZ
  zoomImage.elevateZoom(zoomConfig);
});

.grosse-bild { position: relative;margin-left: 0;width: 70%; display: block;
    float: left;  box-sizing: border-box;

}
.grosse-bild > img{ position:relative; max-height:100%;     max-width: 100%;
    vertical-align: middle;
    border: 0;}

 #lalo {width: 5%; margin-right: 10px; margin-right: 7px;}

 .kleine-fenster{
   display: block;
    overflow: hidden;
    height: 350px;
    margin-bottom: 1em;
    border: 1px solid #d8d8d8;
    text-align: center;
    line-height: 350px;
    cursor: pointer;

  }
  #gallery_01{
    position: relative;
    float:left;
    display: table;
    line-height: 0;
    content: '';
  }

<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>
<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 style="border:1px solid #e8e8e6;" id="zoom_03" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png" 
data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg"
width="100%"  />

</div>
</div>

  <div id="gallery_01">
 
   <a  href="#" class="elevatezoom-gallery active" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg">
   <img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100"  />
    </a>

   <a  href="#" class="elevatezoom-gallery" data-update="" data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg">
   <img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100"  />
   </a>

   <a  href="#" class="elevatezoom-gallery" data-update=""   data-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" data-zoom-image="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg">
   <img class="window" src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image3.jpg" width="100"  />
   </a>

</div>
</div>

只需调整您想要的样式即可。