Forum - Mit der Lupe 2 Bilder anzeigen

<script>
$(document).ready(function() {
 
$('#loupe1').ClassyLoupe({
maxSize: 1000,
size: 300,
zoom: 200,
overlay: false,
canZoom: true,
resize: true
});
 
});
 </script>
 

<style>
.loupe {z-index:11;cursor:none;background-color:#ffffff; border-radius:250px;border:3px solid #444444;width:250px !important;height:250px !important;}
</style>
 
<img class="loupe1" src="https://files.homepagemodules.de/b104774/pictures_u429_7c12b2.jpg" width="250px">
<br><br>
<img class="loupe1" src="https://files.homepagemodules.de/b104774/pictures_u429_7c12b2.jpg" width="400px">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 
// (c) 2010 jdbartlett, MIT license
(function(a){a.fn.loupe=function(b){var c=a.extend({loupe:"loupe",width:200,height:150},b||{});return this.length?this.each(function(){var j=a(this),g,k,f=j.is("img")?j:j.find("img:first"),e,h=function(){k.hide()},i;if(j.data("loupe")!=null){return j.data("loupe",b)}e=function(p){var o=f.offset(),q=f.outerWidth(),m=f.outerHeight(),l=c.width/2,n=c.height/2;if(!j.data("loupe")||p.pageX>q+o.left+10||p.pageX<o.left-10||p.pageY>m+o.top+10||p.pageY<o.top-10){return h()}i=i?clearTimeout(i):0;k.show().css({left:p.pageX-l,top:p.pageY-n});g.css({left:-(((p.pageX-o.left)/q)*g.width()-l)|0,top:-(((p.pageY-o.top)/m)*g.height()-n)|0})};k=a("<div />").addClass(c.loupe).css({width:c.width,height:c.height,position:"absolute",overflow:"hidden"}).append(g=a("<img />").attr("src",j.attr(j.is("img")?"src":"href")).css("position","absolute")).mousemove(e).hide().appendTo("body");j.data("loupe",true).mouseenter(e).mouseout(function(){i=setTimeout(h,10)})}):this}}(jQuery));
 
$('.loupe1').loupe();
});
</script>
 

<img class="loupe1" src="https://files.homepagemodules.de/b104774/pictures_u472_bvrsGPqZ.jpg" width="350px">
<br />
<img class="loupe1" src="https://files.homepagemodules.de/b104774/pictures_u472_bvrsGPqZ.jpg" width="540px">
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://www.zella.de/code/js/okzoom.js"></script>
<script>
$(function(){
$('.loupe1').okzoom({
width: 200,
height: 200,
border: "3px solid #888888",
shadow: "0 0 8px #eeeeee",
background:"#eeeeee"
});
});
</script>