извините за мой Engli sh .. Я новичок в javascript ...
У меня два javascript Код;
Один для галереи изображений с ekko-lightbox ,
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
и еще один для 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);
});
Hier весь мой код javascript, Html и Css,
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);
});
$(document).on("click", '[data-toggle="lightbox"]', function(event) {
event.preventDefault();
$(this).ekkoLightbox({alwaysShowClose: true});
});
.grosse-bild { position: relative; margin-left: 0;width: 52%; display: block; box-sizing: border-box; background-color: black;
}
.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;}
#gallery_01{
position: relative;
float:left;
display: table;
line-height: 0;
content: '';
margin-top: 1%;
}
<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">
<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 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" >
</a>
<a href="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" data-toggle="lightbox" data-gallery="gallery" ">
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image1.jpg" width="100" class="img-fluid thumb" />
</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" >
</a>
<a href="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" data-toggle="lightbox" data-gallery="gallery" >
<img src="https://raw.github.com/elevateweb/elevatezoom/master/images/large/image2.jpg" width="100" class="img-fluid thumb" />
</a>
</div>
</div>
Итак, моя проблема, наведение небольшой галереи изображений не работает, остальная часть кода работает.
Я открываю маленькую галерею Две вещи: теперь это происходит с отображением наведения в большом окне, а при щелчке по нему открывается галерея изображений
Может ли кто-нибудь объяснить мне простыми словами, как решить эту проблему?