例子1

<!-- HTML -->

   <img class="my-foto" src="/images/image-small.jpg"  data-large="/images/image-big.jpg" title="JS代码网">

<!-- 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="JS代码网 - js-css.cn" data-help="你可以用鼠标滚轮缩放放大镜倍率" title="JS代码网">

<!-- 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="JS代码网JS代码栏目提供最新、最好用的JS代码下载" title="JS代码网">

<!-- 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="JS代码网">
   <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="JS代码网">

<!-- 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="JS代码网">

<!-- 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>