示例 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>