抱歉我的英语不好..我对 javascript 很陌生...
我从 here 获取此代码
这里可以显示我所有的代码。
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>
现在,当单击小图库上的图像时,将显示该图像。
我的新 Questin;
我的问题是,如何才能达到相同的效果,但无需点击,仅使用悬停选择器。
请有人用简单的话解释一下如何解决这个问题?
最佳答案
很简单,改一下
image.on('click', function(){
进入:
image.hover(function(){
现在,当您将鼠标悬停图像更改时,您可以使用 super 缩放。
//$("#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>
关于javascript - elevatezoom 上带有悬停选择器的图库图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61591340/