Der code von dem kleine Bilder Gallery have mit **ekko-lightbox** gebaut und der Code für das zoom mit **elevatezoom** . Hier das ganze Code, Javascript ~~~ <!--- offnet die kleine bilder galerie ---> $(document).on("click", '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox({alwaysShowClose: true}); }); <!--- hover kleine bilder gallery und zeigt auf dem grosse fenster ---> 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 Fenster ---> $('#zoom_05').elevateZoom({ zoomType: 'inner', cursor: 'crosshair', }); ~~~ Css ~~~ .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; } ~~~ Html ~~~ <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> ~~~ [Hier ](https://jsfiddle.net/ichder/vbsfmtd9/1/) kannst sehen wie der code funzioniert... Meine probleme, wenn der Zoom wird gezeigt , er zeigt nur auf dem **kleine-fenster** Div, wenn ich möchte die wird gezeigt auf ganze Fenter, das ist, auch auf dem **grosse-bild** Div... Kann Bitte jemand hilfe mit dieser Probleme?

Der code von dem kleine Bilder Gallery have mit **ekko-lightbox** gebaut und der Code für das zoom mit **elevatezoom** . Hier das ganze Code, Javascript ~~~ <!--- offnet die kleine bilder galerie ---> $(document).on("click", '[data-toggle="lightbox"]', function(event) { event.preventDefault(); $(this).ekkoLightbox({alwaysShowClose: true}); }); <!--- hover kleine bilder gallery und zeigt auf dem grosse fenster ---> 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 Fenster ---> $('#zoom_05').elevateZoom({ zoomType: 'inner', cursor: 'crosshair', }); ~~~ Css ~~~ .grosse-bild { padding: 40px; background-color: #dedee0; width: 53.7%; } .kleine-bild {border-style: solid; border: 1px solid #b3b3b3; margin: 3px; width: 100px; margin-bottom: none;} #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; } ~~~ Html ~~~ <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> ~~~ [Hier ](https://jsfiddle.net/ichder/vbsfmtd9/1/) kannst sehen wie der code funzioniert... Meine probleme, wenn der Zoom wird gezeigt , er zeigt nur auf dem **kleine-fenster** Div, wenn ich möchte die wird gezeigt auf ganze Fenter, das ist, auch auf dem **grosse-bild** Div... Kann Bitte jemand hilfe mit dieser Probleme?