Изображение галереи с парящим селектором

Question

извините за мой английский sh .. Я очень новичок в javascript ...

Я пришел этот код от здесь

Здесь могу показать весь мой код.

 


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

zoomImage.elevateZoom(zoomConfig);//initialise zoom

image.on('click', 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 { padding: 40px;   background-color: #dedee0;  width: 53.7%;           

}

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

 .kleine-fenster{
   
   display: block; 
   width: 50%;
   border: none;
   padding-top: 5px;
   margin-left: auto;
   margin-right: auto;

  }

 <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="411"  />

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

Теперь при нажатии на изображение в маленькой галерее, изображение отображается.

Мой новый квест;

Мой вопрос, как может получиться такой же эффект, но без щелчка, только с селектором hover .

Может кто-нибудь объяснить с простыми словами как решить эту проблему?

Answer 1

Это просто, просто измените

image.on('click', function(){

на:

image.hover(function(){

Теперь, когда вы наводите курсор, измените изображение и вы можете использовать супер зум.

//$("#zoom_03").elevateZoom({gallery:'gallery_01', cursor: 'crosshair', galleryActiveClass: "active", zoomType: "inner" }); 


/*var image = $('#gallery_01 a');
var zoomConfig = {  };
var zoomActive = false;

image.on('click', function(){

        $.removeData(image, 'elevateZoom');//remove zoom instance from image
  
        image.elevateZoom(zoomConfig);//initialise zoom
    
});*/
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);
});

 <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>


      <script type="text/javascript" src="https://rawgit.com/elevateweb/elevatezoom/master/jquery.elevatezoom.js"></script>
<script src="https://raw.github.com/elevateweb/elevatezoom/master/jquery.elevatezoom.js"></script>

<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="411"  />

<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="http://th00.deviantart.net/fs70/PRE/i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.jpg" data-zoom-image="http://th00.deviantart.net/fs70/PRE/i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.jpg">
<img src="http://th00.deviantart.net/fs70/PRE/i/2011/040/e/5/snow_hill_tower_by_past1978-d395ezn.jpg" width="100"  />
</a>


    
</div>