支持6种放大模式的jQuery图片放大镜插件 A jQuery plugin designed to provide gallery view for images

示例 1

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
      $(".my-foto").imagezoomsl({
        
         zoomrange: [3, 3]
      });
   });   
</script>

---

示例 2

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" 
               data-title="Red Valentino" data-help="Используйте колесико мыши для Zoom +/-" title="Фото">

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
       $(".my-foto").imagezoomsl({
	  
           zoomrange: [1, 10],
           cursorshadeborder: "10px solid #000",
           magnifiereffectanimate: "fadeIn",
           magnifierpos: "left"		
       });
   });   
</script>

---

示例 3

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" 
               data-text-bottom="Осень-зима 2018/14 / Ready-To-Wear / НЕДЕЛЯ МОДЫ: Нью-Йорк" title="Фото">

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
       $(".my-foto").imagezoomsl({
	  
          zoomrange: [2.12, 12],
          magnifiersize: [530, 340],
          scrollspeedanimate: 10,
          loopspeedanimate: 5,
          cursorshadeborder: "10px solid black",
          magnifiereffectanimate: "slideIn"					
      });
   });   
</script>

---

示例 4

<!-- CSS -->

<style>
.my-container{
	border: 1px solid #F0F0F0; 
	width: 250px; 
	height: 250px;
}
</style>

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" title="Фото">
   <div class="my-container"></div>   

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
       $(".my-foto").imagezoomsl({
	  
          descarea: ".my-container", 				
          zoomrange: [1, 12],
          magnifiereffectanimate: "fadeIn",
          magnifierborder: "none"		  
       });
   });   
</script>

---

示例 5

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
   jQuery(function(){
   
      $(".my-foto").imagezoomsl({
	  
         zoomrange: [1, 12],
         zoomstart: 4,
         innerzoom: true,
         magnifierborder: "none"		 
      });
   });   
</script>

---

示例 6

<!-- CSS3 -->

<!-- круглая лупа в Chrome и Firefox -->
<style>
.round-loupe{
   border-radius: 75px;
   border: 5px solid #F0F0F0;
}
</style>  

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg" data-large="/images/image-big.jpg" title="Фото">

<!-- JAVASCRIPT -->

<script>
jQuery(function(){
   
  $(".my-foto").imagezoomsl({
	  
      innerzoommagnifier: true,
      classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
      magnifierborder: "5px solid #F0F0F0",                               // fix для Opera, Safary, Yandex		  
      zoomrange: [2, 8],
      zoomstart: 4,
      magnifiersize: [150, 150]		
  });
});   
</script>